VS Code for Javascript & React Development

I’ve gone through the setup and daily use of a number of editors over the years including most current popular ones for front end development (i.e. sublime, atom, and vs code) and for me VS code is the best choice for front end development at the moment.

The team has put a lot of effort into making it a great javascript experience out of the box and it shows (VS code itself is written in typescript and the team uses vs code to build vs code) and with some additional work you can have the best experience while writing javascript.

Extensions

VS Code has a nifty feature where you can add an extensions.json file to the root of your project so when a teammate opens the directory in vs code for the first they’ll be prompted to view the recommended extensions for the workspace. Read more about here

Below is the file you can use for all the extensions I’ve mentioned above:

extensions.json:

{
  // Recommended extensions for VS Code
  // See http://go.microsoft.com/fwlink/?LinkId=827846
  // for the documentation about the extensions.json format
  "recommendations": [
    // Extension identifier format: ${publisher}.${name}.
    "formulahendry.auto-close-tag",
    "formulahendry.auto-rename-tag",
    "EditorConfig.EditorConfig",
    "dbaeumer.vscode-eslint",
    "xabikos.ReactSnippets",
    "spoonscen.es6-mocha-snippets",
    "Orta.vscode-jest",
    "christian-kohler.path-intellisense",
    "msjsdiag.debugger-for-chrome",
    "esbenp.prettier-vscode"
  ]
}

Some handy settings

  • "editor.fontFamily": "Fira Code" Fira Code font
  • "editor.fontLigatures": true - Requires a font that supports ligatures like Fira Code
  • "workbench.editor.showTabs": false - VS Code has excellent tab switching built and IMHO eliminates the need for displaying tabs across the top
  • "window.menuBarVisibility": "toggle" - I almost never the menu bar across the top so might as well hide it by default (only applies on Windows machines)