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.
Top comments (12)
Welcome to Dev, brother 🥳.
Nice post to get started.
Thanks brother ❤️
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
It's great suggestions!
I prefer native sync configuration.
Yes... Its a very useful extension 🙂
Nice post
Thanks❤️
Thanks, I was planning to do research on setting up VSCode today. You just saved me a lot of searching!
Ohh... That's great... But you can still do research there are many more extensions for VS code
"Settings Sync" is not more needed since months. See code.visualstudio.com/docs/editor/.... Now native.
Yes... Its Very usefull extention for those who use VS code on multiple devices
Es7 react snippets (long name but you'll find it)