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.
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.
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.
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.
3. Prettier - Code formatter
Never worry about formatting again!
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!
5. Better Comments
This extension helps you to create more human-friendly and easy-to-read 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
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!
8. 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).
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!
Hope this post will help you in web development. Thank you for reading the post.