Visual Studio Code (VSCode) is one of the most powerful source code editors which makes developers’ lives easier by providing tools like IntelliSense code completion and debugging.
There are thousands of extensions in the Visual Studio Marketplace. I would like to mention some extensions that have been really helpful in my frontend development journey.
1. Visual Studio IntelliCode
It autocompletes the method or code if it is supported by the language you are writing on.
Linting is one of the best tools for developers to figure out some of the coding issues upfronts. This extension does not only work for detecting issues but also auto-fix some of them.
This extension helps to auto-complete ES6 related code.
4. Prettier — Code formatter
Formatting is one of the keys which helps when you are working in a group as it is harder to read code if it is not formatted properly.
This extension helps to format any kind of code. We can also configure if we needed.
5. Live Share
One of the best tools where you can edit or debug in someone less machine.
It helps to share the project, offers terminal or debugging tools, and voice calls too.
6. Debugger for Chrome
If you want to debug in the VSCode then this is the best tool for you where you can run your own instance for chrome and debug easily in the VSCode.
7. Path Intellisense
We deal with different imports in our frontend development and sometimes it will be tougher to get proper syntax and we need to dig again and again to make a proper path in the code.
Path Intellisense helps autocompleting file paths when we start typing. Impressive, isn't it?
8. Auto Rename Tag
Sometimes we are thinking to change the tag name in order to do so if we change the first tag we need to go all the way down to search for the same tag to make changes.
This extension helps to rename the tag open/close tag automatically.
9. REST Client
We do deal with different service integrations and it might be REST or GraphQL services.
In order to check the response before implementing code in UI, we mostly use Postman, SOAP UI, or REST client.
This extension is handy to check responses in VSCode itself.
10. Code Spell Checker
One of the worst nightmares is in code review you get a comment to correct spelling.
These extensions help to correct spelling while coding. My best companion LOL.
11. Project Manager
There are times when we work on multiple projects at a time and we need to open different projects in different folders.
This extension comes to the rescue as it supports multiple projects in the sidebar. It makes remote working easier with the option of Remote Projects.
12. Live Server
One of the tedious tasks during web development is that when we change code we need to refresh the browser to see the effect of new changes.
This extension helps us to automatically refresh the browser once changes happened in the code. It helps us to boost productivity for sure.
The best tool to know when the block of code was changed and by whom. It also helps to check what was the older code.
14. Code Runner
Want to run specific code without setting up anything? It can be achieved if you have this extension.
15. TypeScript Hero
Helps to improve your TypeScript Code.
16. Bracket Pair Colorizer
This extension allows matching brackets to be identified by colors.
When we are into a debugging session and working on a huge codebase this extension comes helps to identify open and close brackets easily.
17. Settings sync
Sometimes we might work on different machines and yeah whatever VScode snippets, extensions, key bindings, or settings we saved might not available here.
This extension helps to reuse the same configuration in any machine. Isn't it cool?
18. Intellisense for CSS
This extension helps to give different suggestions and auto completions of CSS class which we used in our workspace.
19. Better Comments
When it comes to maintenance of project comments play a vital role. If the comments are written properly it is easier for the next developer to understand the code.
This extension helps to make interactive comments which will be really helpful. Hopefully, the next developer who is reading my code will be happy now. Ha Ha !!
20. ES7 React/Redux/GraphQL/React-Native snippets
This extension is helpful as it is auto-suggesting some useful code.
21. Turbo Console Log
This extension makes debugging much easier by automating the operation of writing the meaningful log message.
22. Import Cost
This extension will display inline in the editor the size of the imported package.