VS Code Extensions

Visual Studio Code image/svg+xml

VS Code Extensions

We use a number of settings, shortcuts, and extensions to make our lives easier when developing with Visual Studio Code. Here are some of our favorites extensions.

To install an extension, launch VS Code Quick Open (+P), paste the command, and press enter.


ext install vscode-icons

vscode-icons shows icons in the sidebar that correspond to the file type.

Can I Use

ext install vscode-caniuse

Can I Use checks HTML/CSS/JS for browser compatibility, based on caniuse.com. The default keybinding is ctrl+shift+i on Windows/Linux and ctrl+c on Mac.

Color Highlight

ext install color-highlight

Color Highlights display web colors in your code in that color.

Debugger for Chrome

ext install debugger-for-chrome

Debug in Chrome from inside VS Code. Pick a launch config from the dropdown on the Debug pane in Code, and press the play button or F5 to start.

For React projects, create the file .vscode/launch.json in your project with the following configuration (more info):

  "version": "0.2.0",
  "configurations": [
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "userDataDir": "${workspaceRoot}/.chrome",
      "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"

ECMAScript Quotes Transformer

ext install es-quotes

Switches a string between single and double quotes, and between normal strings and ES6+ template strings.


ext install embrace

Surround the selection with parentheses, brackets, quotes, etc. The extension does not configure any keybindings for these commands by default.


ext install vscode-eslint

Check JavaScript for errors and style violations as you edit. Requires ESLint, which you can install with:

user@localhost ~
npm install eslint -g

HTML Boilerplate

ext install html5-boilerplate

Adds a snippet for HTML 5 boilerplate.

Path Intellisense

ext install path-intellisense

Autocomplete filenames as you type. Very handy for module imports.

View In Browser

ext install view-in-browser

Opens an HTML page in the default browser. Bound to +F1 (Mac) or ctrl+F1 by default.

Theme Info

Since I’m always asked, I use the following themes:

  • Code: Oceanic Next Italic
  • Atom: Atom Dark UI theme; Kobalt syntax theme (with some personal customizations)