Table of contents :
Visual Studio Code logo

5.4. VSCode, what plugins do you need?

It is difficult to say what plugins you would need for your VSCode. That totally depends on the files you edit with it. If you search for VSCode extensions or VSCode plugins, you will find lots of personal lists and favorite plugins.

In my case, I use VSCode for editing the files for my website.

That means some PHP files (which I mostly use for inserting HTML code- blocks) and some JSON files ( used for changing VSCode settings). So I dont have plugins for those because these type of files are not that important to me.
The files that are important to me are: HTML files, JS files, SCSS files, and CSS files.
Also I wanted to be able to compile and test these 4 filetypes from inside VSCode.

To do that I found a couple of plugins that made my life easier.
It is important to know that the following list is in no particular order. All I did was throw the plugins I work with in a list. I tried to give a short description of each plugin, (some of them are described in more detail in their own chapter):

  1. Live Sass Compiler by Glenn Marks.
    VSCode: Plugin: Live Sass Compiler by Glenn Marks.
    VSCode: Plugin: Live Sass Compiler by Glenn Marks.
    VSCode: Plugin: Live Sass Compiler by Glenn Marks.

    With this plugin you can automatically compile your SASS files, each time you save them.
    There is more information in a separate chapter: "Chapter 09: VSCode: Live Sass Compiler explained."

  2. Live Server by Ritwick Dey.
    VSCode: Plugin: Live Server by Ritwick Dey.
    VSCode: Plugin: Live Server by Ritwick Dey.
    VSCode: Plugin: Live Server by Ritwick Dey.

    With this plugin you can run a server for your webpages.

  3. HTMLhint by ctf0.
    VSCode: Plugin: HTMLhint by ctf0.
    VSCode: Plugin: HTMLhint by ctf0.
    VSCode: Plugin: HTMLhint by ctf0.

    With this plugin VSCode will report possible errors in your HTML-syntax.

  4. Emmet plugin extension.
    This plugin is build right into VSCode, so you dont need to install it yourself. There is a full explanation in Chapter 5: Plugins how to install htmlhint emmet

  5. Project Dashboard by Kruemelkatze.
    VSCode: Plugin: Project Dashboard by Kruemelkatze.
    VSCode: Plugin: Project Dashboard by Kruemelkatze.
    VSCode: Plugin: Project Dashboard by Kruemelkatze.

    This plugin is described in the Projects Chapter: "Chapter 08: VSCode, Project and Project plugins."

  6. Project Manager by Alessandro Fragnani.
    VSCode: Plugin: Project Manager by Alessandro Fragnani.
    VSCode: Plugin: Project Manager by Alessandro Fragnani.
    VSCode: Plugin: Project Manager by Alessandro Fragnani.

    This plugin is described in the Projects Chapter: "Chapter 08: VSCode, Project and Project plugins."

  7. SVG by jock.
    VSCode: Plugin: SVG by jock.
    VSCode: Plugin: SVG by jock.
    VSCode: Plugin: SVG by jock.

    This plugin is a Powerful SVG Language Support Extension. Almost all the features you need to handle SVG.

  8. Better Comments by Aaron Bond.
    VSCode: Plugin: Better Comments by Aaron Bond.
    VSCode: Plugin: Better Comments by Aaron Bond.
    VSCode: Plugin: Better Comments by Aaron Bond.

    This extension helps you to create more meaningfull comments, by coloring them.

    VSCode: Plugin: Better Comments by Aaron Bond.
    VSCode: Plugin: Better Comments by Aaron Bond.

    You can use different colors for Alerts, Queries, TODOS, Highlights, and whatever you want. Each type just starts with its own specified character. You can add your own types.

  9. Auto Rename Tag by Jun Han.
    VSCode: Plugin: Auto Rename Tag by Jun Han.
    VSCode: Plugin: Auto Rename Tag by Jun Han.
    VSCode: Plugin: Auto Rename Tag by Jun Han.

    This plugin works on tags. Sometimes you want to rename a tag, change a div into a section for instance. That means you have to change 2 tags, the begin and the end div-tag. This plugin takes care of changing the second one. As soon as you change one, be it the begin or the end tag, this plugin changes the corresponding tag.

  10. vscode-icons by VSCode Icons Team.
    VSCode: Plugin: vscode-icons by VSCode Icons Team.
    VSCode: Plugin: vscode-icons by VSCode Icons Team.
    VSCode: Plugin: vscode-icons by VSCode Icons Team.

    VSCode: Plugin: vscode-icons examples.
    VSCode: Plugin: vscode-icons examples.

    Some examples of file icons belonging to vscode-icons.

  11. Material Icon Theme by Philipp Kief.
    VSCode: Plugin: Material Icon Theme by Philipp Kief.
    VSCode: Plugin: Material Icon Theme by Philipp Kief.
    VSCode: Plugin: Material Icon Theme by Philipp Kief.

    VSCode: Plugin: Material Icon examples.
    VSCode: Plugin: Material Icon examples.

    Some examples of file icons belonging to Material Icon Theme.

  12. Peacock by John Papa.
    VSCode: Plugin: Peacock by John Papa.
    VSCode: Plugin: Peacock by John Papa.
    VSCode: Plugin: Peacock by John Papa.

    VSCode: Plugin: Peacock colored workspace examples.
    VSCode: Plugin: Peacock.

    Some examples of Peacock colored workspace.

  13. Colorize by kamikillerto.
    VSCode: Plugin: Colorize by kamikillerto.
    VSCode: Plugin: Colorize by kamikillerto.
    VSCode: Plugin: Colorize by kamikillerto.

    VSCode: Plugin: Colorize, visualizes colors in css, scss, XMl files.
    VSCode: Plugin: Colorize, visualizes colors in css, scss, XMl files.

    This plugin visualizes colors in css, scss, XMl files etcetera.

  14. Icon Fonts by idleberg.
    VSCode: Plugin: Icon Fonts by idleberg.
    VSCode: Plugin: Icon Fonts by idleberg.
    VSCode: Plugin: Icon Fonts by idleberg.

    VSCode: Plugin: Icon Fonts, insert i-tags for icon fonts.
    VSCode: Plugin: Icon Fonts, insert i-tags for icon fonts.

    This plugin helps you to quickly add complete i-tags for a variety of icon fonts..

  15. HTML End Tag Labels by Ante Primorac.
    VSCode: Plugin: HTML End Tag Labels by Ante Primorac.
    VSCode: Plugin: HTML End Tag Labels by Ante Primorac.
    VSCode: Plugin: HTML End Tag Labels by Ante Primorac.

    VSCode: Plugin: HTML End Tag Labels.
    VSCode: Plugin: HTML End Tag Labels.

    This plugin adds comments, based on classes and IDs of the start-tag, to every corresponding end-tag.
    But only while inside the VSCode editor. When you save the file, as in the screenshot, those comments are not really there. Instead, the original comments you might have put there, still exist.

  16. Code Spell Checker by Street Side Software.
    VSCode: Plugin: Code Spell Checker by Street Side Software.
    VSCode: Plugin: Code Spell Checker by Street Side Software.
    VSCode: Plugin: Code Spell Checker by Street Side Software.

    This is a basic spellchecker plugin (English language).
    There are some other languages too, like for instance Dutch. These only load that languages dictionary.

    VSCode: Plugin: Code Spell Checker (Dutch) by Street Side Software.
    VSCode: Plugin: Code Spell Checker (Dutch) by Street Side Software.
    VSCode: Plugin: Code Spell Checker(Dutch)by Street Side Software.

  17. indent-rainbow by oderwat.
    VSCode: Plugin: indent-rainbow by oderwat.
    VSCode: Plugin: indent-rainbow by oderwat.
    VSCode: Plugin: indent-rainbow by oderwat.

    VSCode: Plugin: indent-rainbow colorizes indents.
    VSCode: Plugin: indent-rainbow colorizes indents.

    This plugin colorizes your indented source, with rainbow colors. Now you can easily read your code.

  18. Snippet by Devon Ray.
    VSCode: Plugin: Snippet by Devon Ray.
    VSCode: Plugin: Snippet by Devon Ray.
    VSCode: Plugin: Snippet by Devon Ray.

    This is one of the plugins that introduces an extra icon in the left sidebar:
    VSCode: Plugin: Snippet.
    VSCode: Plugin:Snippet.

    With this plugin you can create, edit and insert small pieces of code in your VSCode files.
    Now VSCode itself also has the possibility to create snippets, you can find the explanation here:
    "Snippets in Visual Studio Code."
    Shortly said: The VSCode snippets are in a special format that allows you to position the cursor and do many more intelligent things. While with this Snippet plugin, you can just create a collection of small pieces of code to insert. So if you want intelligence, take a look at the VSCode snippets.

    This snippet plugin works as follows:

    VSCode: Snippet plugin, Insert, Edit and Delete snippets.
    VSCode: Snippet plugin, Insert, Edit and Delete snippets.
    VSCode: Snippet plugin, Insert, Edit and Delete snippets.

    After clicking on the Snippet Icon in the left side bar, a new tab SNIPPETS opens.

    Because we are working with HTML files here (index.html), you can see a directory called HTML.
    You can open and close it by clicking on the small arrow in front of it. When its open it shows a list of snippets for HTML files.

    VSCode: Snippet plugin, creating a snippet.
    VSCode: Snippet plugin, creating a snippet.
    VSCode: Snippet plugin, creating a snippet.

    Creating a snippet goes like this: Select the part that has to become a snippet.

    Do a Right-click on it and from the popup menu choose Create Snippet.

    VSCode: Snippet plugin, creating a snippet, naming it.
    VSCode: Snippet plugin, creating a snippet, naming it.
    VSCode: Snippet plugin, creating a snippet, naming it.

    Naming the snippet.

    VSCode: Snippet plugin, creating a snippet, defining the snippets tags.
    VSCode: Snippet plugin, creating a snippet, defining the snippets tags.
    VSCode: Snippet plugin, creating a snippet, defining the snippets tags.

    Type 1 or more tags to define what is inside the snippet.

    VSCode: Snippet plugin, creating a snippet, saving the snippet.
    VSCode: Snippet plugin, creating a snippet, saving the snippet.
    VSCode: Snippet plugin, creating a snippet, saving the snippet.

    After typing the tags, press ENTER to save the snippet. On the snippet tab you can see the new snippet is present.

    VSCode: Snippet plugin, editing a snippet.
    VSCode: Snippet plugin, editing a snippet.
    VSCode: Snippet plugin, editing a snippet.

    To edit the snippet, do a Rightclick on its name on the snippet tab and choose Edit from the popup menu.

    The Insert command of this popup menu, inserts the snippet at the current cursor position.

    VSCode: Snippet plugin, editing a snippet on a special Edit-tab.
    VSCode: Snippet plugin, editing a snippet on a special Edit-tab.
    VSCode: Snippet plugin, editing a snippet on a special Edit-tab.

    The snippet opens on a special Edit-tab in VSCode. You can edit its content. You can resize the Editbox on this Edit-tab, by grabbing the lower right corner. After you press the Save button the Edit-tab closes and the snippet is saved.

    VSCode: Snippet plugin, inserting a snippet.
    VSCode: Snippet plugin, inserting a snippet.
    VSCode: Snippet plugin, inserting a snippet.

    Another way to insert a snippet, is by positioning your mouse cursor where you want the snippet to be inserted, do a Rightclick and choose Insert snippet from the popup menu.