Install VS Code plus a few extras (for Node, React, and React Native)

Published in

Minimalist Dev

2 min readMar 15, 2018

So far I tried Atom, VS Code, and a few others. VS Code is my favorite because… auto-complete, extensions, integrated terminal, Git integration, side-by-side tabs, etc.

1. Install VS Code (once per machine)

From VS Code.

2. Install Standard JS VS Code plugin (once per machine)

I have a bit of OCD so I like things to be consistent. Standard JS is a set of style conventions and library that enforces some style standards.

In VS Code select View > Extensions. Then search for and install vscode-standardjs.

3. Install the Document This extension (once per machine)

Continuing the OCD inspired plugins, this plugin makes it easy to add documentation to functions in JS.

In VS Code select View > Extensions. Then search for and install Document This. Then on any JS file you an just type /** followed by the ENTER key and it will generate a quick documentation comment with all the parameters. The documentation is then shown whenever you use the method.

4. Install the packages for Standard JS to work

yarn add --dev standardjs in the npm project directory. Or npm install --save-dev standardjs if you haven’t yet moved to use yarn over npm.

5. Configure the extras in VS Code (once per project)

You will see a bunch of options, but these are the ones I like.

In VS Code select Code > Preferences > Settings. A list of options will show up and options to override on the right pane. Select WORKSPACE SETTINGS and enter the following:

{
  "files.autoSave": "afterDelay",
  "editor.tabSize": 2,
  "editor.formatOnSave": false,
  "standard.autoFixOnSave": true,
}

The first line makes it so that you don’t have to worry about saving (I still do it as a habit). The second is a preference to keep the code more compact and sets the tab size to 2 spaces. The third is required to that you can use the last one. The last setting will auto-format (based on standardjs style) every time you save. This combined with the autosave makes it so that your files are always consistent (OCD heaven :))

Modifying this file will generate a new file under settings.json which you should add to source control.

Like this article? Give it a few claps and share it! Know a better way to do things or just want to say hi? Write me at eric.vera at gmail.com.