Top 10 VSCode Extensions as a Web Developer

VSCode or Visual Studio Code is the most popular editor for web development in 2020. One of VSCode's most popular features is its extensions. Every month, people from around the world build open-source extensions to help with the VSCode experience. I will show you my favourite 10 VSCode extensions for web development.

Installing VSCode and VSCode Extensions

In order to use VSCode's extensions, you need to download it. You can download it here.

To install extensions click on the extension's icon (shown below) and type in the extension. Once found, click install to install the extension to VSCode.

My Top 10

10: Better Comments

Source

Better comments is an extension which will help improve your code by commenting by alerts, information, TODOs, questions, and more. This is just an overall great extension to make your code more readable and have comments be sorted neatly.

9: Error Lens

Source

Error Lens is an extension which shows your errors on the lines where they are present (example above). This extension is a lifesaver when looking for the small bug which crashes your whole application. Additionally, this extension is extremely customizable which enables you to change things like colours, fonts, font size, excluding some errors, and much more.

8: Import Cost

Source

This extension provides the import cost (as the name suggests) next to every module/package you import. It's very important to know if you are optimizing your imports and dependencies so that you can ensure the fastest and most efficient experience for your users. This extension works well with ES6 import and ES5 and below require syntax.

7: Bracket Pair Colorizer 2

Source

This extension gives the same colour to matching brackets and parenthesis. This extension prevents you from taking too long looking for the correct closing bracket. This is a must-have if you are using a language which uses brackets and not indentation (sorry python users).

6: Material Theme & Material Icon Theme

Source: Me Learning Flutter with the Palenight Theme & Material Icons

This extension gives you amazing icons for your files and a wonderful theme. My favourite theme in Material theme is the palenight theme (that's a lot of themes). These two extensions our my favourite when it comes to design/themes in VSCode.

5: HTML Snippets

Source

This extension allows you to type something like div.container and get <div class="container"></div>. This extension allows you to write HTML super quickly. The main reason why I like this extension so much is its JSX support. I'm a React dev and this makes me much more productive.

4: Live Server

Source

This is the easiest way to get a server up and running in seconds. On a click of a button, your site is up and running locally. The benefits of using this instead of putting your index.html file on Google is that every time you save your file, the changes are directly implemented in front of your eyes (no reloading necessary).

3: Git Lens

Source

Git lens, git with superpowers. This extension is the best one for git and GitHub. Know who contributed each line, seamlessly navigate and explore git repositories, and perform powerful comparisons, and so much more. This is a must-have if you work with git and GitHub.

2: Auto Rename Tag

Source

Auto rename tag is an extension which changes both tags when one is changed (example above). Once again, I love this extension because of its JSX support. This extension is one which will improve your productivity noticeably.

1: Prettier

Source

Here it is. My favourite VSCode extension for web development. Prettier is a lifesaver when it comes to formatting and productivity. Prettier formats your files on a save once you configure it in your settings. Instead of spending hours a day making your code look clean, use Prettier. This extension is by far the most popular on the list with over 8,750,000 downloads at the time of writing this article. This is why Prettier is my favourite VSCode extension for web development.