One of the most amazing pieces of Visual Studio Code is adaptability, particularly through extensions. In case you're a web developer, you won't almost certainly live without introducing these extensions!
Table of Contents
1. Auto rename tag
2. CSS Peek
3. JS-CSS-HTML formatter
4. Better Comments
5. Code Spell Checker
6. Path Intellisense
7. Live server
8. Browser Preview
9. Project Manager
Auto rename tag
Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!
Ref:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
CSS Peek
As its name suggests, this extension lets you jump to the CSS code using classes and IDs.
Ref:https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
JS-CSS-HTML Formatter
This extension wraps js-beautify to format your JS, CSS, HTML, JSON files.
Don’t invest time formatting your code. There's no compelling reason to. It's overly simple to arrangement and can be designed to organize your code consequently on spare.
With this, you will never stress over formatting again!
Ref:https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter
Better Comments
This expansion color codes different kinds of remarks to give them diverse centrality and stand out from the remainder of your code. I utilize this ALL THE TIME for todo remarks. It's difficult to disregard a major orange comment disclosing to me I am very brave work to do.
There are additionally color codes for questions, alerts, and highlights. You can likewise include your own!
Ref:https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development#toc-16-better-comments
Code Spell Checker
A basic spell checker that works well with camelCase code.
The objective of this spell checker is to help find basic spelling mistakes while keeping the quantity of false positives low.
Ref:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Path Intellisense
In huge projects, recalling explicit file names and directories your files are in can get tricky. This expansion will give you intellisense to simply that. As you begin typing away in citations, you will get intellisense for registries and file names. This will spare you from investing a great deal of time in the file explorer.
Ref:https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Live server
Make changes in code editor, switch to browser, and refresh to see changes.
That is the unending cycle of a developer, however imagine a scenario in which your browser would consequently refresh whenever you make changes. That is the place
Live Server comes in!
It additionally runs your application on a localhost server. There are a few things you can possibly test when running your application from a server, so this is a decent advantage.
Ref:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Browser Preview
I adore the Live Server expansion (referenced above), how ever his expansion goes another above and beyond as far as accommodation. It gives you a live-reloading preview directly within VS Code. No all the more having to tab over to your browser to see a little change!
Ref:https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
Project Manager
We hate switching between projects in VS Code. Every time we have to open the file explorer and find the project on my computer. But that changes with Project Manager. With this extension, you get an extra menu in your side menu for your projects. You can quickly switch between projects, save favorites, or auto-detect projects Git projects from your file system.
If you work on multiple different projects, this is a great way to stay organized and be more efficient.
Ref:https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
Over All reference
https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development#toc-16-better-comments