How to use Visual Studio Code for web design

To design sites, you ought to use an honest text editor. Microsoft’s open-source text editor Visual Studio Code (VSC) is such an excellent editor. Here is how I set it up and which plugins help me having an honest time while writing HTML and CSS.

Basics

Installing VSC: you'll download Visual Studio Code for free of charge here. If you happen to get on a Mac, you ought to use Brew to put in packages. you'll 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 travel for.

Always use the latest version: make certain to always update to the newest version of VSC. Microsoft releases great new features monthly and you are doing not want to miss one. Just use Code > Check For Updates…Open Projects: To open VSC, always browse to your project folder on the terminal and stir up the editor with code .. This way, you open your whole project together.

 

This is how an HTML5 Boilerplate project seems like after startup via code .

Use Cmd + P: to modify between files, you'd usually use tabs. which may be still okay with one index.htmll and onestyle.css file, but even with our example HTML5 Boilerplate and its many files, it already gets complicated. it's much faster to use  Cmd + P with its typeahead functionality to quickly find and edit the file you would like. Let me show you what I mean.

 

Use symbols to leap within the file: Wonder, where you defined that h2 heading in your main.css? Well, you'll browse the entire file or memorize it. otherwise, you can just hit cmd+shift+o to quickly attend a definition within your HTML and CSS files.

This is how I might find my <h1>  definition inmain.css:

Yay, I used to be lucky. I just hit  cmd+shift+o, typed in h and within the typeahead list I already saw the h2> definitions. I can switch with the up and down keys.

 

Use Emmet: 

To massively speed up typing HTML, use Emmet. it's a shortcut-language that expands to HTML. You write h2>div*2 and hit Tab. It expands to the subsequent.

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

Use this cheat sheet to find out all the commands Emmet has.

Settings

You can customize all of your settings in Code > Preferences > Settings. Here are my most vital 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 like it better to have some space between my lines, so I double the line spacing. and that I increase the font size so I can move far away from my monitor a touch more.

2. By default, the word doesn't wrap at line endings. I prefer what they are doing.

3. As described above,  Cmd+P is a lot faster than tabs. Switch them off!

4. Minimaps helps you to stay a bird’s eye overview

Plugins

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

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

• Beautify: 

this provides 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'll just type b4  and you get an inventory of Bootstrap 4 snippets at your fingertips. Very handy!
• cdnjs: 

Quickly add your favorite libraries from the instruction. Just entercmd+shift+p > cdnjs and look for something nice, for instance, Bulma.

• Close HTML/XML tag: Does exactly what it promises. Helps you closing your tags
• HTML Snippets: Another set of snippets, this point HTML5 semantic snippets. Has no prefix, just use the tag, so for example figure will spit out an entire figure set.
• Material Icon Theme: Pure aesthetics, but your folder and files look tons nicer with this one
• Sublime Material Theme: Another eye-candy. See whether you look it. most people do.