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.

Recommended Extensions for VS Code

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

vscode-icons

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}/*"
      }
    }
  ]
}