Sheldon Led

A close photo of the VS Code extensions tab. Photo by Ferenc Almasi on Unsplash
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.


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"


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.