← flaviocopes.com

Configuring VS Code

Published Feb 09 2019

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

Next I installed these extensions:

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!



Check out my books

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site. Follow on Twitter

Solopreneur? Wannabe? Adventure awaits