If you are a programmer, it means you practically live in your text editor. These extensions will boost your productivity to a whole new level. Most of these extensions are only published in the VS Code Marketplace, so if you use a different editor, many of these extensions might not be present.
1. Live Server
This extension improves your development speed as it spins up a little server that has hot reloading ( when the file is saved the server automatically reloads ). Most web frameworks like React and Angular already provide this functionality, but with this extension, you can have the same functionality in any web development project
2. Prettier
Prettier is an opinionated code formatter. What it does is as simple as formatting your code, and it is beneficial to have a code formatter at your fingertips as it saves a lot of your time. It can also format your code automatically on save.
3. Better Comments
Better comments help you write more readable comments. This extension helps to organize your comments visually, which makes it much easier to understand. You can categorize your comments to have highlighted text, errors and warnings, questions and strikethrough. With these formatted comments being visually separated you won’t miss out on any must-read comments.
4. Polacode
This extension is highly recommended for people who work with a team and constantly need to share code. This extension allows you to take beautiful screenshots of code to share with other people instead of a boring old screenshot!
5. Quokka.js
This extension is like a Chrome Console in VS Code. You can run JavaScript and TypeScript files with this extension without opening the browser or creating a server. It is a very popular JavaScript/TypeScript Playground in Visual Studio Code
6. ES7 React/Redux/GraphQL/React-Native snippets
This extension is very useful for React.js programmers as it provides a lot of snippets to create class components, components, imports, states and many more. It also provides a few basic snippets for JavaScript like anonymous functions, loops, for each etc.
7. Bootstrap 5 and jQuery CDN Snippets
What this extension does is it gives you the Bootstrap 5 and jQuery CDN Snippets. It helps you speed up the time you spend on a project as instead of searching Google for the CDN you have access to this in your editor.
8. Auto rename tag
This extension allows you to change the name of the element at the start if you change it at the end and vice versa. This extension is not only helpful in HTML but in React as well due to the type of components.
9. Code Spell Checker
If you make a lot of spelling mistakes this extension is a must-have for you. It underlines the spelling mistakes so that you can correct them and it also gives you a few suggestions of what the incorrect word should be.
10. Color Picker
This extension is for all the fellow CSS developers out there. This extension can convert a color to a different color format and it can also open the color picker in any file format.
Conclusion
There are many more extensions than what is mentioned here, so if you want to check them out, click me. These extensions are my top 10 so if you would like to recommend some more extensions, please leave a comment below. Happy Coding
By Darsh Adak