My Always-Up-to-Date VS Code Setup for Web 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

  • 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
  • Tslint: Integrates TSLint Typescript 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
  • React Snippets: Common React code snippets, especially handy for proptypes
  • css2React: Convert selection between CSS and React inline style syntax and vice versa
  • React Pure To Class: Common React code snippets, especially handy for proptypes
  • Code Spell Checker: A basic spell checker that works well with camelCase code
  • Debugger for Chrome: Use the VS Code debugger to debug your project running in Chrome
  • 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

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.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)