The 10 Best VS Code Extensions
As a web developer, we are using different code editors to improve our development and typing speed, reduce typing mistakes, and lots of other things. Different code editors provide different extensions that make our work easier and provide lots of other features that help us a lot.
Today I will show you some very useful extensions that will help you a lot in the development. Below is the list of those extensions.
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Using GitLens you will easily identify which code is edited by who and when.
When you rename one HTML/XML tag then the Auto Rename tag will automatically rename the paired HTML/XML tag. It is really helpful and reduces our time to find a matching pair of the tag.
Path Intellisense will show our directory structure while we are importing any file in the href, src attributes, or importing files in any import statement. It is very useful to eliminate context switching and costly distractions.
4. Live Server
Using Live server extension you can launch a development local Server with a live reload feature for static & dynamic pages.
The above extension will provide us material design icons for all types of files. It will look more convenient while we have a different type of extension file in the same project.
Indent Rainbow has colorized the indentation in front of your text alternating four different colors on each step. So you can easily identify which element is closing where.
7. CSS Peek
CSS Peek extends HTML and js code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code. Using this you can easily view your specific element’s CSS and go to that element definition in css/scss/less file.
8. MYSQL
Using the MYSQL extension you can connect your database in VS Code and run queries, view a list of tables. Also, you can perform insert, update, and delete operations in the database.
9. Polacode
Polacode is used to click a picture of your code. Sometimes you need a snapshot of your code to post somewhere at that time this extension will be a lifesaver.
10. Better Comments
The Better Comments extension will help you to create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into:
- Alerts
- Queries
- TODOs
- Highlights
- Commented out code can also be styled to make it clear the code shouldn’t be there
- Any other comment styles you’d like can be specified in the settings
