DEV Community

Cover image for 9 + 1 Visual Studio Code Extensions for Easier and Faster Development
Savvina Drougouti
Savvina Drougouti

Posted on • Updated on

9 + 1 Visual Studio Code Extensions for Easier and Faster Development

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!

Discussion (10)

Collapse
ferasdawod profile image
Feras Dawod

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

Collapse
laxedo17 profile image
laxcivo

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.

Collapse
drsavvina profile image
Savvina Drougouti Author

Thanks! Great, nice you let me know about Preview, I will give it a try too :)

Collapse
laxedo17 profile image
laxcivo

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!

Collapse
laxedo17 profile image
laxcivo • Edited

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!

Collapse
goodlifeinc profile image
DJango Freeman

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

Collapse
drsavvina profile image
Savvina Drougouti Author

Thanks for your honest opinion. It's probably a good idea to write an extension setup guide.

Collapse
patrickkyei profile image
Patrick-Kyei

Thanks for this post. It's something i've been looking for, especially #1

Collapse
drsavvina profile image
Savvina Drougouti Author

That's great, I am glad you liked it!

Collapse
jamesonmescouto profile image
Jameson Mescouto

Excellent!