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.

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

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

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

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

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

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

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

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

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

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

Conclusion

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