dev-environments

🧰 Setting Up Your Dev Environment

While there are many ways to setup and customize your development environment, we'll walk through one recommended setup.

Recommended Setup

Text Editor

Install the VSCode text editor.

• In terminal, you can open files/folders in VSCode using the code <file> command.
• Recommended extensions
  • Eslint: A linter for JS files
  • Prettier: A code formatter (auto-formats spaces, tabs, etc.)
  • Live Server: Live reloads your browser while editing web apps
  • Microsoft IntelliCode: Intellisense + AI = Profit??
  • Vueter: Vue.js support for VSCode
  • Code Runner: Provides a button to run code (have to enable the "Show run icon in title menu" option)
  • Remote - SSH + Remote - WSL: Run VSCode on your machine to edit files on another machine. Pretty cool.
• Themes
  • Explore some of the cool color themes in VSCode
  • Choose an icon theme such as VSCode icons or the Material Icon Theme.

Command Line Tools

Install the following command-line tools.

• git
  • The most common version control system out there
  • Feel free to use a visual git client such as GitHub Desktop or GitKraken if that's your thing
• node.js
  • Runtime environment for running JS outside the browser
  • Note: Linux/WSL users will probably want to install using Node Version Manager nvm or the package manager for your distro (instructions here)
  • Comes with the node command, which runs JS code in the terminal, and the npm command (stands for "Node Package Manager"), which installs libraries from the node ecosystem
  • In each node project, you have a package.json file that lists out dependencies, build scripts, and other project metadata
  • Some of our projects use yarn instead of npm
    • If you see a yarn.lock file, the project uses yarn. If you see a package-lock.json file, it uses npm (those two files fully describe dependency versions)
    • A conversion chart for common commands can be found here

WSL for Windows

If you're on Windows, I'd recommend using Windows Terminal alongside Windows Subsystem for Linux (WSL). This blog post has a pretty solid tutorial for setting everything up. Setting this up isn't a requirement, but these tools provide a pleasent developer experience, especially for users who are comfortable with Unix.

Project-Specific Tooling

Some projects have specific tools that greatly improve the development experience.

Platform

• Vue.js Devtools: Browser extension for debugging Vue applications

Mobile Apps

• React Devtools: Browser extension for debugging React & React Native applications
• Expo: The easiest way to build and develop React Native apps
• Android Studio: Useful for emulating Android devices
• XCode: Useful for emulating iOS devices (only available on macOS)

Additional Options

For people who want to go against the grain, here are some options for you.

Text Editors

• Atom: Another popular text editor made by GitHub
• Brackets: A text editor tailored for web design
• Vim: A text editor for masochists

Terminals

• iTerm2: A popular terminal interface for macOS