Disclosure: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.
Visual Studio Code is one of my favorite editors as I love its high customizability. There are really many extensions that can make your life much easier and here are some of the best ones to boost your productivity. If you are a beginner, try these extensions and make your web development experience much more effective and simple.
You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X).
Feel free to share your favorite VS Code extension. Have fun!
#1 Live Server
Make changes in the code editor, switch to the browser, and refresh to see changes. That's the endless cycle of a developer, but what if your browser would automatically refresh anytime you make changes? That's where Live Server comes in!
It also runs your app on a localhost server. There are some things you can only test when running your app from a server, so this is a nice benefit.
You make changes in your editor and have to refresh to check these changes. True story, isn’t it? Live Server extension comes here to help you see your changes in real time since your browser is refreshed automatically every time you save in VSCode.
#2 Bracket Pair Colorizer
An extension to fall in love for. When you have so many lines of nested code it’s getting pretty tricky to match the brackets. Bracket Pair Colorizer colors matching brackets to make the code much more readable and interesting.
#3 Prettier
Never worry about formatting again! Prettier is here to help you format your code and make it prettier (obviously). It can be configured to format automatically on save.
#4 CSS Peek
CSS Peek is really helpful as it saves much time going back and forth to HTML and CSS files. It’s a pretty fancy extension for developers who don’t like split screen. Hover over a selector within your HTML file and view an image of your CSS code. CSS Peek will also convert ids and class names to hyper links directing you to their definition in the CSS file.
#5 Debugger for Chrome
One of the most popular VS Code extensions for developers, the official debugger for Chrome comes with built-in features to help you debug your Javascript files running in Chrome browser directly from VS Code.
#6 GitLens
One of the most useful extensions for VS Code, this one will save your day when more than one contributors work on the same repository. History, recent changes, code authorship, blame information and commit searching are some of the best features of this cool extension.
#7 Auto Rename Tag
Do you need to rename an HTML element? With Auto Rename Tag extension you just need to rename either the opening or closing tag and the other one will be automatically renamed. Simply and effectively!
#8 Path Intellisense
If you work on large projects, remembering all directories and file names can be very tricky. This extension will help you, showing autocomplete file names as you start typing a path in the quotations.
#9 Browser Preview
Live Server extension is very cool but this one goes one level further and allows you to open a real browser preview inside your editor that you can debug. No more need to check the browser after making a small change.
#10 One Dark Pro
If you are a dark theme lover, Atom's iconic One Dark theme will become your favorite one. Not surprisingly it's one of the most downloaded themes for VS Code!
Top comments (10)
Excellent collection, although I've had my own set of issues using the Bracket Pair Colorizer extension. It made vs code unusable after several hours of work, intellisense would stop working, path completion and formatting would also stop
great article! I've downloaded most of the extensions listed in it. Just a quick note though, Live Server is ok but imho nothing beats Preview on Web Server which has perfect integration with VS Code 'cos it doesn't open up a windows in a external browser but within VS Code.
Thanks! Great, nice you let me know about Preview, I will give it a try too :)
hope you like it. It has been very useful to me when editing html and css files together, sometimes with some javascript.
With Auto Save on, you see the results in real time without having to use Control + S, it works very well. Cheers Savvina!
in addition, you can have a web browser in visual studio code. Sometimes I use it to study something for instance, without leaving VS Code at all. They added this very recently:
You go to the Command Palette (Ctrl + Shift + P) and choose Simple Browser: Show (paste or type a URL, press Enter, and there you go!).
You also have the Browser Preview extension, which also lets you navigate the internet while in VS Code. More or less the same as before -this one uses headless chromium-.
It can be useful sometimes to have everything on VS Code. I like working like that, with PDFs, a full website open for whatever reason (i.e. Blazor University), everything on VS Code, there are also articles like this one, mentioning a Stack Overflow View extension, which can be useful, etc.
dev.to/sar/top-5-vs-code-extension...
see ya' Savvina!
most of them are thrash extensions, maybe except prettier and debugger for chrome but you dont go into details how to setup those, which might be qiute tricky sometimes.
the packages do the job for some two-file-starter projects though
Thanks for your honest opinion. It's probably a good idea to write an extension setup guide.
Thanks for this post. It's something i've been looking for, especially #1
That's great, I am glad you liked it!
Excellent!