VS Code

My preferred editor is VS Code by Microsoft, which recently was voted #1 developer tool in the 2018 Stack Overflow Developers survey. It is fast, stable, feature-rich and has an extensive marketplace of extensions to add to the built-in features.

VS Code version 1.0 was released in March 2016, and since then has grown to be one of the most popular editors around. Its built-in developer tooling such as IntelliSense code completion, debugging, integrated terminal and built-in Git source control give it features closer to a full IDE than a text editor, while still keeping excellent performance.

The source code is open-source and available on GitHub, which has instructions for running a build yourself. The most common way of getting it is to download the latest stable build, or if you want to try the latest builds you can download the Insiders release, which you can install and run alongside the stable release.

Settings

Some notes on settings I use within VS Code:

Programming Ligatures

FiraCode is a monospaced font with programming ligatures for common multi-character combinations such as => or ===

FiraCode example

To install:

Open settings.json - from the File menu choose Preferences, Settings or use keyboard shortcut Ctrl+, (Cmd+, on Mac). Then paste the following lines and save the file.

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

Emmet with JSX

To get Emmet working with JSX add the following setting:

"emmet.includeLanguages": {
   "javascript": "javascriptreact"
},

Autofixing with ESlint on save

Using a code formatter such as Prettier to autoformat your code will reduce the mental fatigue of formatting, and in a team will help keep your source code consistent. Using ESLint you can use auto-fix on save to apply the Prettier rules, with whatever overrides you want in your eslintrc file. In VS Code settings add:

"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,

"eslint.alwaysShowStatus": true,
"[javascript]": {
    "editor.formatOnSave": false
},
"[css]": {
    "editor.formatOnSave": false
},

Note you do not need to install the Prettier extension for this to work, you will only need the ESLint extension as this does the formatting work.

in eslintrc file add the following to use the prettier base rules:

"extends": [
   "prettier"
],
"plugins": [
   "prettier",
]

Extensions

The VS Code Marketplace has over 6,000 extension available to install, these are some that I use:

Written on May 10, 2018