Sheldon Led

close shot of a computer screen with VSCode open
Photo by Ferenc Almasi on Unsplash

My VSCode setup

Published: . Updated:

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

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
  • 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

  • Bracket Pair Colorizer 2 - A customizable extension for colorizing matching brackets
  • 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

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