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
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
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
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
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
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
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
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
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
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
Top comments (11)
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.
Thank you! That means a lot.
Yeah I do agree with @buggy1887 it's same on all top lists
But I got one new here thats 'Error lens'
That's a great one! Glad you liked it.
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.
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?
Yes, you can enable it by setting
editor.renameOnTypetotruein the editor settings.Thanks, I will try it out!
Prettier is one of the bests :X
Yes, super helpful!
I finally found HTML snippets i've been wondering how they do that magic in YT tutorials. Thanks for this, i knew about 'better comments' today. I can't wait to show off