Visual Studio Code offers a robust ecosystem of extensions that can significantly boost your productivity. Here are 20 must-have VS Code extensions:
1. Prettier – Code Formatter ✨
- Automatically formats your code for a consistent style.
- Supports multiple languages including JavaScript, TypeScript, HTML, and CSS.
2. ESLint 🔍
- Detects and fixes common code errors.
- Enforces coding standards across your projects.
3. Live Server 🌐
- Provides real-time reloading for HTML, CSS, and JavaScript files.
- Enables instant browser previews for quicker development.
4. GitLens 🔥
- Enhances Git integration in VS Code.
- Shows detailed commit histories and code annotations.
5. Native Bracket Pair Colorization 🎨
- Built into VS Code since version 1.60.
- Enable it by setting
"editor.bracketPairColorization.enabled": truein your settings. - Offers similar functionality to the old Bracket Pair Colorizer extension with improved integration and performance.
6. Auto Rename Tag 🔄
- Automatically renames paired HTML, JSX, or XML tags.
- Saves time and reduces syntax errors during editing.
7. Path Intellisense 📁
- Provides autocompletion for file paths in your code.
- Speeds up the process of importing modules and assets.
8. Thunder Client 🚀
- A lightweight REST API client built into VS Code.
- Facilitates quick API testing without leaving the editor.
9. REST Client ⚡
- Allows you to send HTTP requests directly from VS Code.
- Supports environment variables and request history.
10. Material Icon Theme 🎨
- Enhances file navigation with visually appealing icons.
- Makes it easier to identify file types at a glance.
11. Tailwind CSS IntelliSense 🔥
- Provides advanced autocompletion and tooltips for Tailwind CSS.
- Enhances productivity when working with Tailwind CSS projects.
12. Docker 🐳
- Integrates Docker functionalities within VS Code.
- Manage containers and images without leaving the editor.
13. Remote - SSH 🔌
- Enables remote development on SSH servers.
- Seamlessly work on remote projects as if they were local.
14. Code Runner ⚡
- Allows you to run code snippets for various languages quickly.
- Supports multiple languages and improves rapid prototyping.
15. Settings Sync 🔄
- Synchronizes your VS Code settings across different devices.
- Easily maintain your configuration wherever you work.
16. Debugger for Chrome 🐞
- Facilitates debugging JavaScript code directly in Chrome.
- Simplifies the debugging process for front-end projects.
17. Live Share 🤝
- Enables real-time collaboration with other developers.
- Share your coding session with peers for pair programming.
18. Rainbow CSV 🌈
- Colorizes CSV files for easier reading and editing.
- Enhances visibility of data in comma-separated values.
19. Markdown All in One 📝
- Provides a comprehensive set of Markdown editing tools.
- Includes shortcuts, previews, and enhanced syntax support.
20. npm Intellisense 📦
- Offers autocompletion for npm modules in your import statements.
- Simplifies the process of managing package dependencies.
Enhance your VS Code experience with these extensions and watch your productivity soar! 💥
Follow Me
Thank you for reading my blog. 🚀 You can follow me on GitHub and connect on Twitter
Top comments (15)
Literally why do this oldies still there like bracket pair colorizaer, auto rename tag, path intellisense, and setting sync,
Vscode already provides this
For a moment I can understand why people use bracket pair colorizer, path intellisense, auto rename, auto closing tag
But setting sync, can't these people ever open their extention tab, vscode clearly mentions this from like past 2 years that it's deprecated and to use vscode builtin setting sync you just need to sign in to vscode and it's way way better than that extention
Nowadays whenever I see that top extentions to blah blah blah, most time I see these old extention, looks like these guys can't have time so they just copy paste with some tweaks
You are right
No hate towards you brother, but it's just what I really wanna say, new technology came, new extentions came which are really productivity boosting but yet 9 out of 10 times I see these old lists articles
Once again sorry if you feel bad by my those harsh words
You're doing great, keep going, and to mention this had some really good extentions too like for apis, docker, tailwinds intellisense
Hey, no worries at all! I really appreciate your honesty and feedback.
You're absolutely right some extensions have become redundant with VS Code's built-in features, and it's important to keep up with newer tools that actually improve productivity. I'll definitely keep this in mind for future articles.
But I always prefer articles that are for beginners or people who are just starting out in the world of programming, and certainly there are millions of them on this site, so I publish simple and small things, and in the future there will be other new extensions to this list, I usually update my articles
Glad you found some of the recommendations useful, and thanks again for taking the time to share your thoughts!
Thanks ! Good information
You are welcome ❤️
Prettier -> Biome, faster alternative for linting and formatting.
I will try it
Let me add HTTL here, maybe someone will find it useful too
Oh! Thanks .. seems good! I will try it.
Thanks! 😊 I'm pushing this alone and would love to hear any feedback or help.
Wasn't Bracket Pair Colorizer folded into the core VSCode install a few years ago?
Yes, that's correct. Since VS Code version 1.60, native bracket pair colorization has been integrated into the core editor. You can enable it by setting "editor.bracketPairColorization.enabled": true in your settings. While the Bracket Pair Colorizer extension is still available, many developers now rely on the built-in feature, which offers similar functionality with better integration and performance.
I love Prettier. Makes me want to keep coding so I can see the nice text
Yeah me too 💞
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more