loading...

Top 10 VSCode Extensions as a Web Developer

hb profile image Henry Boisdequin ・4 min read

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.

Alt Text

My Top 10

10: Better Comments

Alt Text
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

Alt Text
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

Alt Text
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

Alt Text
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

Alt Text

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

Alt Text
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

Alt Text
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

Alt Text
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

Alt Text
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

Alt Text
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.

Closing

I hope you got some new VSCode extensions to download! Let me know if I missed out on any in the comments.

Henry

Discussion

pic
Editor guide
Collapse
buggy1887 profile image
buggy1887

Nice to see some variation. When I open this kind of post I have a feeling I read it million times before.

Thanks for sharing.

Collapse
hb profile image
Henry Boisdequin Author

Thank you! That means a lot.

Collapse
doozieakshay profile image
Akshay Joshi

Yeah I do agree with @buggy1887 it's same on all top lists
But I got one new here thats 'Error lens'

Collapse
hb profile image
Henry Boisdequin Author

That's a great one! Glad you liked it.

Collapse
jdbruxelles profile image
José dBruxelles

Hi, I think that you don't actually need the Auto Rename Tag extension in VS Code because the editor already includes this functionality by default.

Collapse
hb profile image
Henry Boisdequin Author

If that's so then it's strange that mine didn't do that by default. Did you set a setting in VSCode to enable that feature?

Collapse
jdbruxelles profile image
José dBruxelles

Yes, you can enable it by setting editor.renameOnType to true in the editor settings.

Thread Thread
hb profile image
Henry Boisdequin Author

Thanks, I will try it out!

Collapse
realattila profile image
[ATTILA]

Prettier is one of the bests :X

Collapse
hb profile image
Henry Boisdequin Author

Yes, super helpful!