loading...
Cover image for 9 + 1 Visual Studio Code Extensions for Easier and Faster Development

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

drsavvina profile image Savvina Drougouti Updated on ・4 min read

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!

Posted on by:

drsavvina profile

Savvina Drougouti

@drsavvina

Software Test Engineer and Web Development Enthusiast. A restless mind.

Discussion

pic
Editor guide
 

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!

 

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

 

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!