Need the best visual studio code extensions for web development? I’ll put my money where my mouth is. If you download Visual Studio Code and use one of these extensions, I’ll pay you $50.
These tools are the most effective on the Internet. The coolest part?
You can successfully deploy them to your web development project on CSS and HTML and come out looking great. These are great extensions.
They can be deployed effectively on multiple projects that you are working on. And you won’t break a sweat.
They are safe, tidy and efficient.
Let’s dive right in…
VS Code Extensions for HTML, CSS & JS
One of the best ways to speed up your coding process is by using extensions. Extensions give you more options as a developer and make Visual Studio Code an even more dynamic environment for development. In this article, you’ll learn about different extensions that you can use for web development.
HTML End Tag Labels
It’s a simple idea that you don’t leave comments in your HTML to indicate what HTML element it is closing (which is typical for partials that close elements that might not be open in the same document).
<div class="main">
</div> <!-- / div.main -->
<?php /* / div.main */ ?>
<?php /* Sometimes I'd do it in a server side language so it didn't go over the wire. */ ?>This extension shows you UI about what HTML is being closed:
Auto Close Tag
When you type the > in an HTML element, like the last bracket in <div>, the closing tag is automatically created for you.
It can be configured to only auto-close after you’ve typed the </ to indicate you’re about to close a tag, which is a default in Sublime Text 3. Speaking of which, if you install the Sublime Text Keymap, you’d get that automatically, plus a handful of other fancy key commands.
There is also a Close HTML/XML tag, but it only works via key command. With AutoClose Tag you can configure it either way, and it has far more installs for whatever reason.
Highlight Matching Tag
Originally, I was planning on making my own video. However, I discovered that even when this extension is turned off, something else in my VS Code is still highlighting matching tags. I’m not exactly sure what it is, which leads me to believe it’s now a built-in feature.
Not specific to HTML, but if you like this sort of help with matching things, you might give Bracket Pair Colorizer 2 a try. This can be quite effective for CSS and JavaScript.
Auto Rename Tag
I find this one quite useful.
This functionality is actually built into Canonical Emmet, but again, VS Code does not use Canonical Emmet so this feature isn’t available, hence the need for this extra plugin.
MarkDown all in one
Writing documentation is part of the developer job, whether you like it or not. The most commonly used markup to write documentations or even blog posts is markdown.Markdown all in one makes this process more enjoyable by providing useful shortcuts, autocomplete and live-preview features. It really speeds up documentation writing, so you can get back to developing new features much faster.
Live Server
Oh I really wish this extension existed when I started to learn web development. It spins up a light node.js server and serves your HTML file and all assets from the given directory. Additionally, any saved changes you make to your website are reflected immediately in the browser, which provides a fast and enjoyable developer experience. This functionality is built into modern frameworks and libraries like Angular and React, but with this extension you can have the same functionality in any web development project.
Better Comments
I leave code comments fairly liberally, especially when diving into new territory or trying out brand-new things. A convention I like is when a comment is prefixed (e.g. TODO) that it is extremely relevant and needs attention. Better Comments allows for a visual difference between them.
As a developer, you should comment on your code often. More than that, commenting your code well is a skill that should be taught in every computer science class and bootcamp out there.
That said, Better Comments is one of those VS Code Extensions that everyone should have because, believe the name, it lets you leave better comments in your code. By allowing you to differentiate questions, exclamations, commented-out code, queries, alerts, highlights, and TODOs, this extension will make not only your life easier, but also the lives of your teammates, and anyone who comes after you on the project.
Code Spell Checker
Visual Studio Code does not offer spell-checking. I don’t love that. I believe this plug-in is a must-have, particularly for HTML, since HTML usually contains content, such as words, that should be spelled correctly. Just like a linter, this plugin offers squiggles when something is awry and a menu that tries to fix it.
Other Best Extensions for VS Code
While we have covered a detailed comparison of the safest VS Code extensions for web development. The following are other extensions for Visual Studio code that can be useful for modifying the editor to suit your needs.
Mithril Emmet
Emmet is a web developer’s toolkit that can greatly improve your HTML & CSS workflow. Emmet allows us to generate HTML code much quicker and easier than writing them out ourselves. This can greatly increase your speed in development.
ESLint
It Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
It allows you to stick to standard practices like indentation and positioning.
Prettier
Formatting takes a lot of time when writing code. Using Prettier, you can automate the process by removing original styling and putting on a consistent style which makes the code much more readable. It automatically cleans up the code when saving changes. We all want a cleaner code.
So we should probably all install Prettier to handle that for us. Prettier is described as an “opinionated code formatter, which enforces a consistent style by parsing your code and re-printing it, taking maximum line length into account and wrapping the code when necessary.” You might not want to use it for every language or project, so you can customize it.
VS Code Icons
A major part of customizing VS Code with extensions is the actual customization. Not just functionality changes.
With VS Code Icons, you can navigate the editor more easily. The file system is skinned with icons representing various file types, and these appear both in the explorer and on the document toolbar. It simplifies the process of navigating through complicated file systems. In some cases, it really does. The icons being so easy to read prevent eye strain and thus headaches. So for your health, install VS Code Icons.
Colorize
CSS is a great technology. However, choosing colors in CSS is not. It can be difficult to get a sense of what palette you’ve set for a website when you’re dealing with hex codes and RGBA values. This extension helps alleviate that by providing a visual note for any color codes you use inside your files. The colors that you’re using within the text itself can be seen as a highlight so that you don’t have to keep switching between swatches and color selectors.
Polacode
Polacode is like a Polaroid camera for your code editor. Designed to make snapshotting your code cleaner and easier, this is a must for any tutorial writers who want their code to be just right.
GitLens
It’s difficult to fully explain what makes GitLens so great. It works as though Git and VS Code were designed with each other in mind, and instead of working through command line hierarchies, you get visualizations and insights that take a lot of the confusion out of team Git work. You can view things via hover, see recent changes and annotations, comparison views within VS Code itself, heatmaps, line history, and so much more. It’s basically the perfect Git extension, and we think you should install it pronto.
Intellisense for CSS Class Names
Intellisense for CSS Class Names provides similar functionality to the extension above. This one will also automatically pull classes from CSS referenced in your HTML files. The class definition will also be available via Intellisense when using Emmet!
By opening the Command Palette, you can force a re-cache of all of the classes from your CSS files at any time.
Path Intellisense
Sometimes it’s difficult to get proper syntax and we have to dig again and again to make a proper path in the code when working on frontend development.
Using Path Intellisense, we can autocomplete file paths as we type. That’s pretty impressive, isn’t it?
Autoprefixer
Having to prefix certain CSS properties to ensure browser support can be an extreme hassle. If it weren’t for the workflows already configured with Create React App, Angular CLI, etc. I would completely forget to add the vendor prefixes.
Autoprefixer will automatically add vendor prefixes to make sure your app looks as good as possible in different browsers. It’s crazy simple. Open the Command Palette and call “Autoprefixer CSS”.
CSS Peek
You might be like me, who hates having to go to my .css file to see the properties associated with a class or id. With CSS Peek, you can view a hover image of your CSS from within your HTML file.
This extension also turns class names and ids into a hyperlink that takes you directly to that class or id definition in your CSS!
Conclusion
Visual Studio Code is a cross-platform editor available for Linux, Windows, and Mac. There are lots of extensions to add support for various programming languages to the VS code editor. In addition to that, there are various helpful extensions to add support for a variety of Markup and CSS languages.
Microsoft has made it very easy to develop extensions for this editor. As a result, there have been many useful extensions for languages such as JavaScript, CSS, HTML, CSS pre-processors, etc. Additionally, these extensions support custom languages you can create with Virtual Studio Code itself.