I've been using VSCode for 5+ years but this code editor is so complete for my needs that for a long time I've used it out of the box, with no plugins or extra setup.

Eventually I started adding some customization here and there, but always ad hoc. Now I really got used to my setup, so I decided to document it so I can rely on this next time I need to install VSCode, and also to serve as inspiration for other VSCode users.

Theme

I use Cobalt2 by Wes Bos. Another one I considered was Night Owl, by Sarah Drasner. No particular reason for the choice, I think I liked the colors of Cobalt2 more. I also use it on my terminal.

Theme settings

Edit global settings, located at ~/Library/Application\ Support/Code/User/settings.json using the recommended settings, with some tweaks, like the font. I appreciate the designer's work but I won't pay $200 for the font at this moment. I'm very happy using Victor Mono, I install it via Homebrew. Here are my settings:

{
  "workbench.colorTheme": "Cobalt2",
  "editor.fontFamily": "Victor Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 25,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "600",
  "telemetry.enableCrashReporter": false,
  "telemetry.enableTelemetry": false,
  "editor.renderWhitespace": "all",
  "editor.suggestSelection": "first",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[graphql]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "workbench.editorAssociations": {
    "*.ipynb": "jupyter.notebook.ipynb"
  },
  "editor.tabSize": 2,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Plugins

On the last time I installed VSCode, I found out that people are building extension packs, but I prefer to install them manually for now.

Functional Plugins

• Git History - Handy visuals for viewing a file history (I mostly rely on git log though)
• Git Lens - Several git goodies, I like it mostly because of the in-line recent changes. I'm testing working without this plugin for now to see if I see any performance changes, and if Git History only is enough for me
• Python - Enables support for coding in python
• Ruby - Enables support for coding in ruby
• Auto Rename Tag - Auto rename paired HTML/XML tag
• Partial Diff - Compare (diff) text selections within a file, across files, or to the clipboard
• Bookmarks - Mark lines and jump to them

Visual Plugins

• Prettier Code formatter - Enforces a consistent style by parsing your code and re-printing it with its own rules
• vscode-icons - Neat icons for all file types
• Indent-rainbow - Makes indentation easier to read by adding some colors
• Peacock - Change the color of a given workspace. Ideal when you have multiple workspaces
• Color Highlight - Whenever you declare a color in the document, it changes the text to that color, giving a visual hint of the color you just wrote
• Better Comments - Adds highlights to comment annotations
• Better Haml - Adds syntax highlighting to haml files
• vscode-styled-components - Syntax highlighting for styled-components
• Vetur - Syntax Highlight for Vue.js and other tooling

And that's pretty much it. Let me know what you think or any suggestions you might have.