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 a great editor. Here is how I set it up and which plugins help me having a good time while writing HTML and CSS.


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 withbrew install visual-studio-code .

Always use latest version: Be sure to always update to the latest version of VSC. 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 .

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

Too tiny? Check it out here:

Use symbols to jump within file: Wonder, where you defined that heading 2 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 :

Yay, I was lucky. I just hit cmd+shift+o , typed in h and in the typeahead list I already saw the h2 definitions. Of course I can switch with the up and down keys.


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, word do not wrap at line endings. I prefer that they do.
  3. As described above, Cmd+P is so much faster than tabs. Switch them off!
  4. Minimaps is a brand new feature in VSC (Feb 17)


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.

  • beautify: This gives your HTML and CSS files auto indentation and makes them easier to read.
  • Bootstrap 4 & Font awesome snippets: With this installed, in every HTML document, you can just type b4 and you get a list of Bootstrap 4 snippets at your fingertips. Very handy!
  • cdnjs: Quickly add your favourite libraries from the command line. Just enter cmd+shift+p > cdnjs and search for something nice, for example Bulma.
  • Close HTML/XML tag: Does exactly what it promises. Helps you closing your tags
  • HTML Snippets: Another set of snippets, this time HTML5 semantic snippets. Has no prefix, just use the tag, so for examplefigure will spit out a whole figure set.
  • Material Icon Theme: Pure aesthetics, but your folder and files look a lot nicer with this one
  • Sublime Material Theme: Another eye-candy. See whether you look it. Most people do.

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

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.