Skip to content

Configuring VS Code

New Course Coming Soon:

Get Really Good at Git

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

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!

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!

Here is how can I help you: