dcsimg
 

Visual Code Extensions for Web Developers

by James Payne
Visual Code Extensions for Web Developers

Visual Studio Code is an open source integrated development environment (IDE). Learn about extensions that will make you a better web developer.

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.

Visual Studio Code Extensions for Web Developers

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

One of the best extensions for VS Code web devs has to be Debugger for Chrome. As the name implies, this handy extension can be used to help debug JavaScript code right in the Google Chrome Internet browser. Unlike Chrome console, this extension lets you debug web pages in the Visual Studio code development environment. This is a real time saver and very convenient.

Learn more about the VS Code Debugger for Chrome extension.

JavaScript Code Snippets

This is a simple extension for Visual Studio Code that packs a lot of punch for web developers. JavaScript (ES6) Snippets is an add-on that lets you use code snippets in the ES6 syntax for both JavaScript and TypeScript. It saves developers time by presenting them with popular pieces of JavaScript code in the form of snippets so that you do not have to type common pieces of code over and over again. Not only does this save developers time, but it also helps reduce errors.

Learn more about the Visual Studio Code JavaScript Code Snippet extension

Live Server

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

ESLint

ESLint is another VS Code extension for JavaScript. It lets you analyze your JavaScript code for any errors and fix them. The extension points out errors, making them easy to find. It also helps you spot warnings as well. In addition, ESLint can auto format your JavaScript code too, so you have consistency across the development team.

Learn more about the Visual Studio Code ESlint extension

C# 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

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

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

Path Intellisense

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

Quokka.js

Despite its quirky name, Quokka.js is actually a pretty great extension for Visual Studio Code. It lets you test out your JavaScript code right in the editor versus having to open up Chrome console. Its a real convenient time saver. Bonus points for TypeScript users that need a sandbox for their code without needing to leave VS Code. It updates and displays Runtime values as you code. Very helpful for JavaScript coders.

Learn more about the VS Code Quokka.js extension

Language Packs

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

Web Dev

Web Dev is another no-brainer extension for VS Code, particularly for web developers and web app programmers. The extension is really a conglomeration of multiple other extensions, all of which are dedicated to web development. It includes some of the VS Code extensions we have already discussed, including Live Server, ESLint, and JavaScript Code Snippets. It contains 24 extensions in total. You can see a full list by checking out the extensions page on Marketplace below.

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

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.

This article was originally published on Thursday Jul 1st 2021
Home
Mobile Site | Full Site