Configure VS Code

How to set VS Code from zero to the ideal tool for JavaScript development

I recently bought a new Mac (MacBook Air) and I had to install the new VS Code, so I took the time to record the work I did to make my coding experience comparable to the old MacBook Pro, and this experience continues For 9 years. year.

Look at meVS code introductionAlso posted

This is what I did:

  1. I installedFerra cipherAnd set it as my font family
  2. I set the "label size" to 2 (this is my belief). Spaces. 2 spaces.
  3. I added**/node_modulesExclude files to prevent them from appearing in the file list
  4. I enabledPaste formatwithFormat when saving
  5. activatedFont ligature
  6. Disable minimap
  7. activatedTrim trailing whitespace
  8. I installedSublime Text Keymap plugin. It givescmd-K cmd-BShortcut to show/hide the sidebar,cmd-WClose files and so on.

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

  • White night theme
  • Nostromo
  • owl
  • Ayu

Next, I installed these extensions:

This is a good condition to start using JavaScript and React.

After configuring everything according to my preferences and needs, this is my user settings JSON:

{
    "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",
    }
}

This[markdown]Partially added Markdown-specific configuration. In this case, I will disable all pop-up windows that distract me while writing, otherwise these pop-up windows will be useful when coding.

That's it.

Also checked outVS Code setup for React development!

Happy coding!


More devtools tutorials: