5.4. VSCode, what plugins do you need?
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):
Live Sass Compiler by Glenn Marks.
There is more information in a separate chapter: "Chapter 09: VSCode: Live Sass Compiler explained."
Live Server by Ritwick Dey.
HTMLhint by ctf0.
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
Project Dashboard by Kruemelkatze.
Project Manager by Alessandro Fragnani.
SVG by jock.
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.
Auto Rename Tag by Jun Han.
vscode-icons by VSCode Icons Team.
Some examples of file icons belonging to vscode-icons.
Material Icon Theme by Philipp Kief.
Some examples of file icons belonging to Material Icon Theme.
Peacock by John Papa.
Some examples of Peacock colored workspace.
Colorize by kamikillerto.
This plugin visualizes colors in css, scss, XMl files etcetera.
Icon Fonts by idleberg.
This plugin helps you to quickly add complete i-tags for a variety of icon fonts..
HTML End Tag Labels by Ante Primorac.
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.
Code Spell Checker by Street Side Software.
There are some other languages too, like for instance Dutch. These only load that languages dictionary.
indent-rainbow by oderwat.
This plugin colorizes your indented source, with rainbow colors. Now you can easily read your code.
Snippet by Devon Ray.
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:
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.
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.
Naming the snippet.
Type 1 or more tags to define what is inside the snippet.
After typing the tags, press ENTER to save the snippet. On the snippet tab you can see the new snippet is present.
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.
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.
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.