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!