Table of contents :
Visual Studio Code logo

5. VSCode, plugins.

Visual Studio Code can be extended with lots of extra features, by means of plugins. A plugin is an extra peace of code which can be installed inside VSCode. With these plugins or extensions, you can add extra debuggers, languages, or lots of different tools, that makes working with VSCode easier and faster.

Button for plugins (extensions) in left sidebar of VSCode.
Button for plugins (extensions) in left sidebar of VSCode.
Button for plugins (extensions) in left sidebar of VSCode.


You can choose plugins from inside VSCode itself by means of the extension button in the left sidebar.

After clicking on that button VSCode shows you the plugins already installed in your version of VSCode. In this case the ones installed in my VSCode. Your list will probably be shorter.

Plugins that are installed in your VSCode.
Plugins that are installed in your VSCode.
Plugins that are installed in your VSCode.

As you can see there is a search button near the top of the opened extensions tab. Typing in that box makes VSCode search as soon as you type any character.

In front of INSTALLED is a tiny arrow with which you can open or close this list of installed extensions.

5.1. Visual Studio Code, how to install a plugin?

Now suppose we want to install the plugin called HTMLHint. For that we start typing its name in the search box, and when we reach htmlh we can already see the list of plugins that have those character sequence in their name.

VSCode installing the HTMLHint plugin.
VSCode installing the HTMLHint plugin.
VSCode installing the HTMLHint plugin.

Plugins that can be installed, have a blue INSTALL button. Plugins that are already installed dont have this button.

Compare this screenshot with the next.

VSCode: More plugin information in the Extensions tab.
VSCode: More plugin information in the Extensions tab.
VSCode: More plugin information in the Extensions tab.

This screenshot gives more information about each extension. That is because I made the extensionstab wider than the one in the previous screenshot.

So if you want to see the plugin icon and its rating, make sure the tab is wide enough!

VSCode: Detailed plugin information in a detail tab, after selecting it.
VSCode: Detailed plugin information in a detail tab, after selecting it.
VSCode: Detailed plugin information in a detail tab, after selecting it.

If you select a plugin in the list, here the already installed HTMLHint plugin, another tab opens, with more detailed information.

Because in this case, the plugin is already installed, you see a Disable and an Uninstall button.

VSCode: Detailed plugin information in a detail tab, of a non-installed plugin.
VSCode: Detailed plugin information in a detail tab, of a non-installed plugin.
VSCode: Detailed plugin information in a detail tab, of a non-installed plugin.

If you select a non-installed plugin in the list, you see an install button.

Suppose we want to install the pluging Bracket Pair Colorizer
This plugin colors matching brackets with the same color so they are easily recognizable. You can define extra tokens that should match and which colors to use.

VSCode: install Bracket Pair Colorizer plugin.
VSCode: install Bracket Pair Colorizer plugin.
VSCode: install Bracket Pair Colorizer plugin.

This plugin has 2 versions. I choose the most recent one, version 2.

Press the install button.


VSCode: installed Bracket Pair Colorizer plugin.
VSCode: installed Bracket Pair Colorizer plugin.
VSCode: installed Bracket Pair Colorizer plugin.

After installing the buttons have changed.

Sometimes, after you install a plugin, a new icon appears in the left side bar. For instance after installing the Project Manager plugin by Alessandro Fragnani.

VSCode: Extra icon in the left sidebar after installing certain plugins.
VSCode: Extra icon in the left sidebar after installing certain plugins.
VSCode: Extra icon in the left sidebar after installing certain plugins.

But this extra icon only appears for certain plugins. Most plugins do not add any icon.

If you ever notice an icon in the left sidebar, that you do not recognize, search for a plugin with that same icon. Generally the icon in the sidebar, is the same as the icon you saw in the extensions list for this plugin.

Now back to our colorizer. Because I use a light theme for VSCode, the colors for the brackets do not stand out much:

VSCode: Bracket Pair Colorizer, colors hardly visible on light theme.
VSCode: Bracket Pair Colorizer, colors hardly visible on light theme.
VSCode: Bracket Pair Colorizer, colors hardly visible on light theme.

So we have to change the colors for a light theme. We go to the settings tab, type brack, and choose Bracket Pair Colorizer:

VSCode: Bracket Pair Colorizer, edit the colors in settings.json.
VSCode: Bracket Pair Colorizer, edit the colors in settings.json
VSCode: Bracket Pair Colorizer, edit the colors in settings.json



VSCode: Bracket Pair Colorizer, changing settings.json.
VSCode: Bracket Pair Colorizer, changing settings.json.
VSCode: Bracket Pair Colorizer, changing settings.json.

You need to go to the end of your settings.json, right behind the last square bracket in this case. Typ a comma right after the square bracket.

After that insert the following code:
VSCode: change colors for Bracket Pair Colorizer, in the settings.json file.
                      
                          "bracket-pair-colorizer-2.colors": [
                                "Lime",
                                "Orange",
                                "CornflowerBlue",
                                "HotPink",
                                "Gold",
                                "Magenta",
                                "IndianRed",
                                "DeepSkyBlue",
                                "OrangeRed"
                          ]
These colors and their sequence, look well on a white background. But you are free to change them as you feel necessary.

VSCode: Bracket Pair Colorizer, changing settings.json.
VSCode: Bracket Pair Colorizer, changing settings.json.
VSCode: Bracket Pair Colorizer, changing settings.json.

Make sure the brackets match and there is that extra comma behind the last line just before the changes.

When it looks like this you can save.

5.2. VSCode, HTMLhint plugin.


This plugin will report the number of errors in your HTML files in the Status bar, and details of the errors in the Problems panel.

VSCode: HTMLhint plugin.
VSCode: HTMLhint plugin.
VSCode: HTMLhint plugin.

After installing it, it looks like this on the Extensions tab.

5.3. VSCode, Emmet plugin extension.


What the Emmet plugin does, is looking at the characters you type, while you are typing them. Comparing the typed characters to an internal list, and if they match, it gives you a popup with what it thinks you might want.
For instance, you just type the letter a:

VSCode: Emmet plugin: typing the letter a.
VSCode: Emmet plugin: typing the letter a.
VSCode: Emmet plugin: typing the letter a.

Just type the a, do not type any further just watch what happens.

A popup appears with some lines starting with a. The first line has the text Emmet Abbreviation on the right. Click on the first line and you get:

VSCode: Emmet plugin: typing the letter a to insert a link.
VSCode: Emmet plugin: typing the letter a to insert a link.
VSCode: Emmet plugin: typing the letter a to insert a link.

The Emmet plugin inserted an empty, but complete link on the place of the a-character. You can fill in the link-title and the link yourself.
So this extension helps you to type more quickly, by suggesting complete commonly used HTML statements, for the 1 or just a few characters you typed. But then you have to know what abbreviations Emmet has for which HTML statements.

A complete explanation can be found here: "Emmet in Visual Studio Code."
There is also an Emmet Cheatsheet inside the course material zip you downloaded. (See the first chapter of this article.) You can find the Emmet Cheatsheet.pdf inside the /Shortcuts Sheets directory.
Part of it looks like this:

VSCode: Emmet plugin: Part of the abbreviations list.
VSCode: Emmet plugin: Part of the abbreviations list.
VSCode: Emmet plugin: Part of the abbreviations list.

The yellow coloring is done by Daniel Walter Scott, for the youtube course mentioned in chapter 1 of this article.
These are the most commonly used abbreviations, according to him.

What I liked very much, but what you dont use very often, is the possibility to create a basic HTML-file by typing just 1 character. It is done like this:

VSCode: Emmet plugin: Create new HTML file, step 1.
VSCode: Emmet plugin: Create new HTML file, step 1.
VSCode: Emmet plugin: Create new HTML file, step 1.

Create a new empty file inside VSCode, with the command File / New File, and save it as yourfilename.html.

As you can see the file is still empty.



VSCode: Emmet plugin: Create new HTML file, step2.
VSCode: Emmet plugin: Create new HTML file, step 2.
VSCode: Emmet plugin: Create new HTML file, step 2.

Now just type 1 exclamation mark, the Emmet popup appears.



VSCode: Emmet plugin: Create new HTML file, step3.
VSCode: Emmet plugin: Create new HTML file, step 3.
VSCode: Emmet plugin: Create new HTML file, step 3.

Now keep your mouse above the text Emmet Abbreviation, but make sure the mouse does not move. Then you can see a little arrow pops up right after this text.

Click only on this little arrow (Do not click on the text so just on the arrow.)
That gives you:

VSCode: Emmet plugin: Create new HTML file, step3.
VSCode: Emmet plugin: Create new HTML file, step 3.
VSCode: Emmet plugin: Create new HTML file, step 3.

The Emmet plugin shows you what will be filled in for the abbreviation you just typed.

With the first line of the popup still selected, press the ENTER key:

VSCode: Emmet plugin: Create new HTML file, step4.
VSCode: Emmet plugin: Create new HTML file, step 4.
VSCode: Emmet plugin: Create new HTML file, step 4.

Like magic we get a ready made mini HTML file, with all necessary lines present.

Pay attention to the second line, where it says lang="en". That is the language attribute for this HTML-file. Which is very important. If your language is not english, you should change that to the correct abbreviation for your language.

Furthermore, you might want some extra lines inside your basic HTML file. You can do that by changing Emmets abbreviation list itself. You can add your own abbreviations. But you have to look up how to do that, in the link above.