VS Code is one of the most popular editors for web development. One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. If you’re a web developer, you won’t be able to live without installing these extensions!
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!
link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
JavaScript (ES6) code snippets
Snippets are the best way to save time and increase your productivity. This extensions provides you with snippets for popular pieces of modern (ES6) JavaScript code.
link: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
Debugger for chrome
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
ES Lint
ESLint is the linting utility for JavaScript. It checks your code for common errors and lets you know in the editor itself. It’s like a virtual peer who is validating your code while you are writing it.
link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Auto rename tag
An auto rename tag is an extension that changes both tags when one is changed (example above). Once again, I love this extension because of its JSX support. This extension is one that will improve your productivity noticeably.
link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Better comments
Better comments is an extension which will help improve your code by commenting by alerts, information, TODOs, questions, and more. This is just an overall great extension to make your code more readable and have comments be sorted neatly.
link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
Git Lens
Git lens, git with superpowers. This extension is the best one for git and GitHub. Know who contributed each line, seamlessly navigate and explore git repositories, and perform powerful comparisons, and so much more. This is a must-have if you work with git and GitHub.
link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Beautify
If you want to have your code beautified whenever you save a file, then this extension is for you!
link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Auto close tag
This extension automatically adds the closing tag of HTML and XML.
link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Prettier
This extension performs the formatting of the JavaScript, CSS and HTML code.
link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
If you like this article, please do share it on social media to help spread the word. Thanks for the read!
