How to use Visual Studio Code for web design

To design web pages, you should really use a good text editor. Microsoft’s open source text editor Visual Studio Code (VSC) is such an editor. Here is how I set it up and which plugins help me having a good time while writing HTML and CSS.

I update this article whenever there is a new version of VSCode. (Latest changes reflected: v1.30.2-Novemer 2018

Basics

Installing VSC: You can download Visual Studio Code for free here. If you happen to be on a Mac, you should really use Brew to install packages. You can then just install VSC with brew install visual-studio-code. On Windows, chocolatey would be the equivalent package manager and choco install visualstudiocode the command to go for.

Always use latest version: Be sure to always update VSC to the latest version. Microsoft releases great new features every month and you do not want to miss a single one. Just use Code > Check For Updates…

Open Projects: To open VSC, always browse to your project folder on the terminal and fire up the editor with code .. This way, you open your whole project as one.

This is how a HTML5 Boilerplate project looks like after startup via code .

Blank Visual Studio Code window

Use Cmd+P: To switch between files, you would usually use tabs. That might be okay when you have one index.html and one style.css file, but even with our example HTML5 Boilerplate and its many files, it already gets complicated. It is much faster and visually pleasing to use cmd+p with its typeahead functionality to quickly find and edit the file you need. Let me show you what I mean.

Use symbols to jump within file: Wonder, where you hid that h2 heading in your main.css? Well, you could browse the whole file or memorise it. Or you can just hit cmd+shift+o to quickly go to a definition within your HTML and CSS files.

This is how I would find my <h1> definition in main.css:

I just hit cmd+shift+o, type in h and in the typeahead list I already see the h2 definitions. Of course I can switch with the up and down keys.

Visual Studio Code Quick Jump

Use Emmet: To massively speed up typing HTML, use Emmet. It is a shortcut-language which expands to HTML. You write h2>div*2 and hit Tab. It expands to the following.

<h2>
      <div></div>
      <div></div>
</h2>

Use this cheatsheet to learn all the commands Emmet has.

Settings

You can customise all your settings in Code > Preferences > Settings. Here are my most important settings:

{ // your settings file must begin like this
      "editor.fontSize": 14, // see note #1    
      "editor.lineHeight": 28, // see note #2
      "editor.wordWrap": "on", // #2
      "workbench.editor.showTabs": "off" // #3
      "editor.minimap.enabled": true, // #4
      "editor.minimap.renderCharacters": true // #4, no comma after the last setting!
}
  1. I prefer to have some space between my lines, so I double the linespacing. And I increase the font size so I can move away from my monitor a bit more.
  2. By default, words do not wrap at line endings. I prefer that they do.
  3. As described above, cmd+p is so much faster than tabs. Use this, not tabs!
  4. Minimaps helps you to keep a bird’s eye overview

Plugins

There are a few VSC plugins that I can wholeheartedly recommend to you for web design projects.

Just install them with cmd+shift+p, type install and select Extensions: Install. In the search bar, type in the name and click on the install buttons next to the plugin.

Notable Features

These are a few features that are relatively new and might help you more than they do help me right now…

Other resources

How do you set up Visual Studio Code for web design projects? And which other plugins do you use on a regular base?

Send me your feedback on
"How to use Visual Studio Code for web design"

March 6, 2018 • Last updated: January 12, 2019

tech