Visual Studio Code is an open source code editor and integrated development environment from the good folks at Microsoft. It is an excellent IDE for not just desktop applications and .Net software, but web development and web apps as well. It is, arguably, one of the most widely used developer tools on the planet and with good reason: in addition to its support for many programming languages and its plethora of features, Visual Studio Code also has a library of extensions you can install to make the IDE even more powerful.
These apps and extensions come in a variety of categories, all housed on Microsoft's Visual Studio Code Marketplace. All told, there are 17 total categories on Visual Code Marketplace, covering topics such Azure, Debuggers, Formatters, Machine Learning, Visualization, and Programming Languages - to name but a few. There are a total of 28,000 extensions listed on the Marketplace, with new ones getting added every day. To help you weed out the most important ones, we will be listing the best web development extensions for Visual Studio Code in 2021 for this article.
Best VS Code for Web Developers in 2021
Below you can find a list of the best web development extensions for web developers that use Visual Studio Code in 2021. These extensions are not listed in any particular order. Nor, as you might imagine given the amount of extensions on the Marketplace, is this list exhaustive. Instead, it contains what we consider to be some of the top extensions that will make you a better web developer.
Editor's Note: We also have a list of Top Visual Studio Code Extensions for Developers in 2021 for other types of developers.
Debugger for Chrome
Learn more about the VS Code Debugger for Chrome extension.
Some web development tasks are tedious. One of the most inane things a web dev has to do is pop open a web browser and refresh it to check a web page or app after they make changes in code. Wouldn't it be easier if the browser would just refresh automatically when changes are made? Live Server not only adds this feature; it also runs your apps on a localhost server with live browser reloading.
Learn more about the VS Code Live Server extension.
Learn more about the Visual Studio Code ESlint extension.
Programming language extensions are powerful tools available on the Visual Studio Code Marketplace. Every developer, no matter what you are programming, should check this section out. Being the fifth most-used language in the world, it is no surprise that C# has its own extension to enhance VS Code. If you create web apps with C#, this is a great addition. It lets you access features such as IntelliSense, Go to Definition, and others normally found in Visual Studio. It also adds support for debugging, syntax highlighting, and project.json.
Learn more about the Visual Studio Code C# extension.
GitLens takes the Git features that already exist inside of Visual Studio Code and amplifies them to a whole new level. The GitLens extension is perfect for visualizing code authorship, navigating or exploring Git repositories, view the who/what/why/when of code changes, view codebase history, and tons more. You can also use GitLens to navigate revisions, view on-demand file annotations within the editor, and find common Git commands via the Git Command Palette. These are just a few of the many features of GitLens.
Learn more about the VS Code GitLens extension.
Auto Close Tag
Auto Close Tag is a no-brainer extension for those that want to reduce code errors due to forgetting to close tags and also people that want to code as efficiently as possible. The Auto Close Tag extension for Visual Studio Code automatically adds closing tags for both HTML and XML, similar to how Visual Studio IDE works. This is a pretty simple feature to be sure, and some web developers may opt not to use auto-complete features like this, but it is definitely a good addition to your Visual Studio Code install if you want to save time and avoid close-tag errors.
Learn more about the Visual Studio Code Auto Close Tag extension.
Polacode is a neat extension for Visual Studio Code that web developers might find useful. In essence, you use the add-on to take code "screenshots" that you can use for documenting, collaboration, or for articles and social media if you are a writer or write about code. Explaining what this lightweight extension does does not do it justice. Check out the link below and watch the demo of it in use to understand why you need this feature.
Learn more about the VS Code Polacode extension.
There are times when you need to reference a filename in your code. Depending upon the size of your projects or how long you have been working on the project, remembering every filename that is part of your project can quickly become a nightmare. Fortunately Path Intellisense exists and can help you solve this issue. The extension is essentially an autocomplete for filenames. Simply start to type in a path in quotations and Path Intellisense will autocomplete directories and filenames for you. This is a much better option than use the file explorer.
Learn more about the Visual Studio Code Path Intellisense extension.
Learn more about the VS Code Quokka.js extension.
Maybe not the first thing that pops into your mind, but did you know that you can extend Visual Studio Code to work in other languages? If you look under the Language Packs category, you will see extensions for Simplified and Traditional Chinese, Japanese, Spanish, Russian, Korean, French, Portuguese, and more. Useful if you speak another language.
Learn more about Visual Code Language Pack extensions.
Learn more about the VS Code Web Dev extension.
CSS Intellisense for HTML
Another Intellisense extension for Visual Studio Code. This one offer Intellisense HTML id and class attribute completion. Works for local and remote files. Template inheritance and additional stylesheets are supported as well.
Learn more about the Visual Studio Code CSS Intellisense for HTML extension.
Better Comments lets web developers create comments that are easier to read by adding the functionality to categorize your annotations into different categories. These comment "categories" include: alerts, queries, ToDos, and highlights. In addition, you can highlight commented-out code, which is pretty useful for testing and debugging purposes or if you are trying out new features in your code. A huge amount of languages are supported, so odds are, if you program in a given language, it will be covered.
Learn more about the VS Code Better Comments extension.
Summary of VS Code Extensions for Web Developers
We covered a lot of ground in this article and showcased some of the best web developer extensions for Visual Studio Code. There are plenty more available at the VS Code Marketplace, so make sure you browse the different categories and find some more developer tools to help you in your development endeavors.