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

  • EditorConfig: See http://editorconfig.org/ if you don’t already have a .editorconfig file in your project
  • Prettier: format javascript using the excellent new Prettier project by James Long
  • Eslint: Integrates ESLint JavaScript linter into VS Code
  • IntelliCode: AI assisted intellisense for Python, TypeScript/JavaScript and Java
  • Jest: Integration for the Jest testing framework
  • Jest Snippets: Common code snippets for unit tests
  • Code Spell Checker: An excellent spell checker that works well with camelCase code
  • Path Intellisense: Autocompletes filenames, handy when typing paths to import modules
  • Auto Rename Tag: Auto rename paired tag in HTML/XML and JSX
  • Auto Close Tag: Auto add closing tags in HTML/XML and JSX
  • Version Lens: Shows the latest version for each dependency in your package.json
  • Markdownlint: Markdown linting and style checking for Visual Studio Code. Handy for editing Readme files
  • Stylelint: Modern CSS/SCSS/Less linter
  • vscode-icons: Very extensive set of icons for just about every file type imaginable
  • Peacock: Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which

React Specific

Angular Specific

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",
    "angryobject.react-pure-to-class-vscode",
    "streetsidesoftware.code-spell-checker",
    "EditorConfig.EditorConfig",
    "dbaeumer.vscode-eslint",
    "xabikos.ReactSnippets",
    "gottfired.css2react",
    "andys8.jest-snippets",
    "Orta.vscode-jest",
    "christian-kohler.path-intellisense",
    "msjsdiag.debugger-for-chrome",
    "pflannery.vscode-versionlens",
    "esbenp.prettier-vscode"
  ]
}

Some handy settings

  • "editor.fontFamily": "Fira Code" - Fira Code font
  • "editor.codeActionsOnSave": { "source.fixAll.eslint": true } - Any fixable eslint issues will be automatically fixed on save
  • "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

Profiles

Now in VS code you can create various profiles as a way to group various customizations and extensions. For example, an Angular and a React profile. I highly recommend checking it out.