Configuring VS Code

How to set up VS Code from zero to a perfect tool for JavaScript development

I recently got a new Mac (a MacBook Air) and I had to install a fresh VS Code, so I took the time to document what I did to make my coding experience equivalent to my old MacBook Pro, which lasted the enormous amount of 9 years.

See my VS Code introduction post too

Here is what I did:

  1. I installed Fira Code and set it as my Font Family
  2. I set Tab Size to 2 (this is my religion). Spaces. 2 spaces.
  3. I added **/node_modules to the Excluded Files to prevent them to show up in the file list
  4. I enabled Format on Paste and Format on Save
  5. Enabled font ligatures
  6. Disabled the Minimap
  7. Enabled Trim Trailing Whitespace
  8. I installed the Sublime Text Keymap plugin. It gives the cmd-K cmd-B shortcut to show/hide the sidebar, cmd-W to close a file and more.

Next I installed some themes. It depends on your taste. I like to switch between

  • Palenight Theme
  • Nostromo
  • Night Owl
  • Ayu

Next I installed these extensions:

  • Prettier
  • IntelliSense for CSS class names
  • Intent 4-to-2
  • ESLint
  • Duplicate action
  • Bracket Pair Colorizer 2
  • Babel ES6/ES7
  • ES7 React/Redux/GraphQL/React-Native snippets
  • TODO Highlight

This is a good set to start working with JavaScript and React.

This is my user settings JSON after configuring all according to my taste and needs:

    "editor.fontFamily": "Fira Code",
    "editor.tabSize": 2,
    "editor.wordWrap": "bounded",
    "files.exclude": {
        "**/node_modules": true
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.minimap.enabled": false,
    "workbench.colorTheme": "Tomorrow Night Blue",
    "files.trimTrailingWhitespace": true,
    "workbench.activityBar.visible": false,
    "window.zoomLevel": 2,
    "editor.cursorBlinking": "smooth",
    "editor.fontLigatures": true,
    "prettier.jsxBracketSameLine": true,
    "prettier.jsxSingleQuote": true,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "[markdown]": {
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off",
        "editor.parameterHints.enabled": false,
        "editor.quickSuggestions": false,
        "editor.snippetSuggestions": "none",

The [markdown] section adds Markdown-specific configuration. In this case I disable all the popups that distract me while writing, which are otherwise useful when coding.

That’s it.

Also check out VS Code setup for React development!

Happy coding!

Download my free Programming Ebooks!