My Top 10 Visual Studio Code Extensions for Web Development
Tags: vscode, webdev, productivity, html
Published: 2021-05-21 16:52:08

### 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](https://code.visualstudio.com/).

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is1hrznajbtolqbyh53h.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ll3chb3svwy9bwsjzqw.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8eqptyt8aka34b53nvbs.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sxglf0ukyyi6497bxbx.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84ymvcy8n0aawv703dzb.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t58zbicvag6jckmoqior.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54afut14pmvq9km5o66g.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5rugpzo31kxkkrkedb6.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aok0zxbegn6vz98dahyz.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i736bbtb5c16yg7r3w8k.png)

***

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/123z5a5yszqftwu31tcu.png)

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