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.
Improved Side Bar usability Full Remote Development support Support for ˜ (tilde) symbol on settings Support for glob…
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.
I’m sorry but I’m super busy now. If you want to be a maintainer of the project, please feel free to contact me! You’ve…
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.
Extension for Visual Studio Code — Supercharge the Git capabilities built into Visual Studio Code — Visualize code…
14. Code Runner
Want to run specific code without setting up anything? It can be achieved if you have this extension.
Extension for Visual Studio Code — Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD…
15. TypeScript Hero
Helps to improve your TypeScript Code.
TypeScript Hero is a vscode extension that makes your life easier. When you are coding a lot of TypeScript you may want…
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.
This extension allows matching brackets to be identified with colours. The user can define which characters to match…
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?
While being free and open source, if you find it useful, please consider supporting it by donating via PayPal or Open…
18. Intellisense for CSS
This extension helps to give different suggestions and auto completions of CSS class which we used in our workspace.
Extension for Visual Studio Code — CSS class name completion for the HTML class attribute based on the definitions…
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 !!
The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you…
20. ES7 React/Redux/GraphQL/React-Native snippets
This extension is helpful as it is auto-suggesting some useful code.