DEV Community

Atul Vishwakarma
Atul Vishwakarma

Posted on

My Top 10 Visual Studio Code Extensions for Web Development

Introduction

Visual Studio Code or VS Code is the most popular editor for Web Development in 2021. One of the most impressive parts of Visual Studio Code is customizability, especially with the extensions. Today, I will show you my 10 favourite VS Code extenions for web development.

Installing VS Code and VS Code Extensions

In order to use VS Code's extensions, you need to download VS Code. You can download it click here.

To install extensions press CTRL+SHIFT+X or just click on the extension icon of Visual Studio Code. Search for the extension and press install.
Alt Text
The choices of the extensions are my of personal opinion.

1. ESLint
Want to write better code? Want consistent formatting across your team? Install ESLint. This extension can be configured to auto format your code as well as 'yell' with linting errors/warnings. VS Code specifically is also perfectly configured to show you these errors/warnings.

Link : https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Alt Text


2. Live Server
Make changes in code editor, switch to 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! On a click of a button, your site is up and running locally. It provides the live preview of our web application right within your editor.

Link : https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Alt Text


3. Prettier - Code formatter
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 performs the formatting of the JavaScript, CSS, and HTML code.

Never worry about formatting again!

Link : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Alt Text


4. Material Icon Theme
Fan of Google's Material design? Then, check out this Material themed icon pack. There's hundreds of different icons and they are pretty awesome looking!

Link : https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Alt Text


5. Better Comments
This extension helps you to create more human-friendly and easy-to-read comments.

Link : https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Alt Text


6. Path Intellisense
Remembering specific file names and the directories your files are in can get tricky. This extension will provide you intellisense for just that. As you start typing a path in quotations, you will get intellisense for directories and file names. This will save you from spending a lot of time in the file explorer

Link : https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Alt Text


7. Polacode
You know those fancy code screenshots you see in articles and tweets? Well, most likely they came from Polacode. It's super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image!

Link : https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Alt Text


8. Debugger for Chrome
Believe it or not, debugging JavaScript means more than just writing console.log() statements (although that's a lot of it). Chrome has features built in that make debugging a much better experience. This extension brought the powerful chrome debugger right into the visual studio code. It is very useful for front-end developers to perform the testing and debugging.

Link : https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Alt Text


9. Bracket Pair Colorizor
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).

Link : https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Alt Text


10. Settings Sync
Developers, myself included, spend a lot of time customizing their dev environment, especially their text editors. With the Settings Sync extension, you can save your setting off in Github. Then, you can load them to any new version of VS Code with one command. Don't get caught without your amazing setup ever again!

Link : https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Alt Text


Conclusion

Hope this post will help you in web development. Thank you for reading the post.

Top comments (12)

Collapse
 
surajondev profile image
Suraj Vishwakarma

Welcome to Dev, brother πŸ₯³.

Nice post to get started.

Collapse
 
jerry-45 profile image
Atul Vishwakarma

Thanks brother ❀️

Collapse
 
ghiscoding profile image
Ghislain B. • Edited

Great list, however number 9 (Bracket Pair Colorizor) should really be removed from the list because it was extremely slow on large because of its external extension nature and so the VSCode team decided to make it built-in and they now recommend using the built-in one instead (please note that the built-in one is disabled by default not to conflict with the older external one), please refer to this VSCode release article for more info: Bracket pair colorization 10,000x faster

Collapse
 
sandhilt profile image
Bruno Ochotorena

It's great suggestions!
I prefer native sync configuration.

Collapse
 
jerry-45 profile image
Atul Vishwakarma

Yes... Its a very useful extension πŸ™‚

Collapse
 
alexmeddeiros profile image
Alex Medeiros πŸ’Ύ

Nice post

Collapse
 
jerry-45 profile image
Atul Vishwakarma

Thanks❀️

Collapse
 
pzxdld profile image
Robert Lipscomb

Thanks, I was planning to do research on setting up VSCode today. You just saved me a lot of searching!

Collapse
 
jerry-45 profile image
Atul Vishwakarma

Ohh... That's great... But you can still do research there are many more extensions for VS code

Collapse
 
cavo789 profile image
Christophe Avonture

"Settings Sync" is not more needed since months. See code.visualstudio.com/docs/editor/.... Now native.

Collapse
 
jerry-45 profile image
Atul Vishwakarma

Yes... Its Very usefull extention for those who use VS code on multiple devices

Collapse
 
swagwik profile image
Sattwik Sahu

Es7 react snippets (long name but you'll find it)