Hey there, fellow coder! ๐ Are you spending more time tweaking your code than writing it? ๐ Do you feel like your VS Code setup could use some superhero-level upgrades? ๐ฆธโ๏ธ Well, buckle up, because weโre about to zoom through the 50 must-know VS Code extensions that will skyrocket your productivity and help you code like a pro! ๐ฅ
Whether you're coding for fun or trying to meet that impossible deadline (you know, the one from yesterday ๐ฌ), these extensions are here to make your life easier.
1. TabNine ๐ค
TabNine is an AI-powered autocompletion tool that helps speed up coding by suggesting completions based on your code context and patterns.
๐ก How it helps: Enhances coding speed with intelligent autocompletions.
2. Prettier - Code formatter ๐จ
Prettier is a code formatter that ensures your code is consistently formatted. It supports multiple languages and can be configured to fit your project's style.
๐ก How it helps: Keeps your code clean and consistent.
3. Live Server ๐
Live Server launches a local development server with live reload capabilities. Itโs perfect for web development, as it automatically refreshes your browser when you make changes.
๐ก How it helps: Provides instant feedback by auto-reloading your browser on file changes.
4. GitLens ๐
GitLens enhances the built-in Git capabilities in VS Code. It provides detailed blame information, commit history, and more.
๐ก How it helps: Offers in-depth Git insights and visualization.
5. ESLint ๐
ESLint is a tool for identifying and fixing problems in JavaScript code. It helps maintain code quality by enforcing consistent coding styles and catching errors.
๐ก How it helps: Ensures code quality by catching linting errors early.
6. Debugger for Chrome ๐ต๏ธโ๏ธ
Debugger for Chrome integrates Chromeโs debugging capabilities with VS Code. It allows you to set breakpoints, step through code, and inspect variables directly in VS Code.
๐ก How it helps: Provides a powerful debugging experience for web applications.
7. Bracket Pair Colorizer ๐
Bracket Pair Colorizer colorizes matching brackets to make it easier to see nested code structures.
๐ก How it helps: Improves readability by color-coding brackets.
Get Bracket Pair Colorizer here.
8. Path Intellisense ๐
Path Intellisense provides autocompletion for file paths in your code. It makes it easier to navigate and reference files in your project.
๐ก How it helps: Speeds up file path referencing and navigation.
Download Path Intellisense here.
9. Auto Rename Tag ๐
Auto Rename Tag automatically renames matching HTML or XML tags as you edit them.
๐ก How it helps: Keeps HTML and XML tags synchronized during edits.
10. Vetur ๐ฆ
For Vue.js developers, Vetur adds support for Vue.js files. It includes features like syntax highlighting, linting, and IntelliSense for Vue.js components.
๐ก How it helps: Provides comprehensive support for Vue.js development.
11. Debugger for Firefox ๐ฆ
If you prefer Firefox over Chrome for debugging, Debugger for Firefox integrates Firefoxโs debugging capabilities with VS Code. Itโs perfect for those who need to debug in Firefoxโs environment.
๐ก How it helps: Integrates Firefoxโs debugging tools directly into VS Code.
Download Debugger for Firefox here.
12. Git Graph ๐
Visualize your Git repository with Git Graph. This extension provides a graphical representation of your commits, branches, and merges, helping you better understand your projectโs history.
๐ก How it helps: Makes navigating your Git history easier with a clear, visual representation.
13. Settings Sync ๐
Sync your VS Code settings across multiple machines with Settings Sync. Itโs a lifesaver if you work on different computers or want to share your setup with others.
๐ก How it helps: Keeps your VS Code environment consistent across all your devices.
14. Code Spell Checker ๐
Code Spell Checker helps you catch typos and spelling mistakes in your code. Itโs like having a spell-checker for your codebase that helps keep your comments and strings typo-free.
๐ก How it helps: Ensures your code comments and strings are free of spelling errors.
15. Vscode-icons ๐
Another great way to customize your file icons is with Vscode-icons. It provides a variety of icons to make your workspace more visually appealing and organized.
๐ก How it helps: Enhances the visual organization of your project files.
16. Jest ๐งช
For JavaScript testing enthusiasts, Jest integrates testing directly into your VS Code setup. It provides features like test results and debugging, right within your editor.
๐ก How it helps: Simplifies testing and debugging of JavaScript code.
17. Rest Client ๐
For those who want a dedicated REST client within VS Code, Rest Client allows you to send HTTP requests and view responses directly in the editor.
๐ก How it helps: Streamlines API testing and keeps everything within your coding environment.
18. Markdown PDF ๐
Export your Markdown files as PDFs with Markdown PDF. Itโs perfect for generating printable versions of your documentation or notes.
๐ก How it helps: Easily convert Markdown documents to PDF format for sharing or printing.
19. Code Runner ๐
Run code snippets and scripts directly within VS Code with Code Runner. This extension supports multiple programming languages, making it a versatile tool for quick testing.
๐ก How it helps: Allows you to execute code snippets in various languages without leaving the editor.
20. Vim ๐ฅ๏ธ
For Vim enthusiasts, the Vim extension brings Vimโs keybindings and modes to VS Code. Itโs perfect for those who love Vimโs efficiency and want to use it in a modern editor.
๐ก How it helps: Provides Vimโs powerful editing capabilities within VS Code.
21. JavaScript (ES6) code snippets ๐
Boost your productivity with JavaScript (ES6) code snippets, which provides shortcuts for common JavaScript code patterns. Ideal for speeding up development and avoiding repetitive typing.
๐ก How it helps: Quickly insert JavaScript code snippets and reduce typing time.
Download JavaScript (ES6) code snippets here.
22. Code Metrics ๐งฎ
Code Metrics gives you an overview of your codeโs complexity and maintainability. It provides metrics on code complexity, helping you write cleaner and more efficient code.
๐ก How it helps: Offers insights into code quality and complexity to help you improve maintainability.
23. SonarLint ๐ต๏ธโ๏ธ
Detect and fix code quality issues with SonarLint. Itโs like having a code review right in your editor, helping you catch bugs and vulnerabilities as you code.
๐ก How it helps: Improves code quality by providing real-time feedback on potential issues.
[Download SonarLint here](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint
-vscode).
24. Git History ๐
Git History provides a comprehensive view of your Git log, file history, and enables you to compare branches or commits. It makes it easier to navigate through your project's version history and manage changes effectively.
๐ก How it helps: Simplifies tracking changes, comparing different versions, and managing branches in your Git repository.
25. Blockman๐ฒ
Blockman highlights code blocks in Visual Studio Code, making it easier to distinguish nested code structures like loops, conditions, and functions. With clear visual indicators, it enhances code readability and helps you focus on the logic flow.
๐ก How it helps: Improves code readability by highlighting blocks, making complex structures easy to follow and debug.
26. Docker ๐ณ
For developers working with containers, Docker adds support for Dockerfiles, docker-compose files, and provides tools for managing Docker containers directly within VS Code.
๐ก How it helps: Simplifies working with Docker containers and integrates container management into VS Code.
27. Remote - SSH ๐
Remote - SSH lets you open and edit remote files over SSH. Itโs perfect for working on projects hosted on remote servers or cloud environments.
๐ก How it helps: Enables remote development by connecting to servers over SSH.
28. Material Icon Theme ๐จ
Enhance the appearance of your file icons with Material Icon Theme. This extension provides a wide variety of icons for different file types, making your workspace more visually appealing.
๐ก How it helps: Improves file visibility and organization with custom icons.
29. Project Manager ๐
Switch between projects effortlessly with Project Manager. It helps you manage and quickly access multiple projects from within VS Code.
๐ก How it helps: Simplifies project switching and management.
Download Project Manager here.
30. HTML CSS Support ๐จ
HTML CSS Support provides IntelliSense for CSS class names in HTML files. Itโs a handy tool for ensuring your HTML and CSS are correctly linked and used.
๐ก How it helps: Enhances HTML editing by providing CSS class name suggestions.
31. Jupyter ๐
For data scientists and analysts, Jupyter integrates Jupyter notebooks with VS Code. It supports running and editing Jupyter notebooks directly in the editor.
๐ก How it helps: Allows you to work with Jupyter notebooks in a powerful, integrated environment.
32. Python ๐
Python is a must-have for Python developers. It provides features like linting, IntelliSense, and debugging for Python code.
๐ก How it helps: Enhances Python development with linting, IntelliSense, and debugging features.
Image Preview๐ผ๏ธ
Image Preview allows you to easily preview images in your code by showing them in the hover tooltip and the gutter. Simply hover over an image file path or see a small preview in the gutter, making it easier to navigate and understand your visual assets directly from the code editor.
๐ก How it helps: Speeds up development by allowing instant image previews on hover and in the gutter, helping you quickly identify and review assets without leaving your editor.
34. npm Intellisense ๐ฆ
npm Intellisense provides autocompletion for npm modules in your JavaScript and TypeScript code. It helps you quickly find and use installed packages.
๐ก How it helps: Speeds up development by offering autocompletion for npm packages.
35. Code Snippets ๐
Code Snippets provides reusable code snippets for various programming languages, making it easier to insert common code patterns.
๐ก How it helps: Improves productivity with reusable code snippets.
36. Color Highlight ๐
Color Highlight displays color previews for color codes in your CSS, SCSS, and other stylesheets. Itโs great for quickly visualizing colors in your code.
๐ก How it helps: Provides visual color previews to help you manage your color schemes.
37. GitHub Pull Requests and Issues ๐ฌ
Manage GitHub pull requests and issues directly from VS Code with this extension. It streamlines code reviews and issue tracking.
๐ก How it helps: Integrates GitHub pull requests and issues into your development workflow.
Download GitHub Pull Requests and Issues here.
38. Peacock ๐
Peacock lets you change the color of your VS Code workspace to help differentiate between different projects or environments.
๐ก How it helps: Adds visual distinction between projects with customizable colors.
39. Azure Repos ๐
Azure Repos integrates with Azure DevOps repositories, allowing you to manage your code and pull requests within VS Code.
๐ก How it helps: Connects your VS Code environment with Azure DevOps repositories for seamless management.
40. Jest Test Explorer ๐งช
Jest Test Explorer provides a test explorer UI for Jest, helping you run and manage your Jest tests directly in VS Code.
๐ก How it helps: Simplifies running and managing Jest tests with a graphical interface.
Download Jest Test Explorer here.
41. Live Share ๐ฃ๏ธ
Live Share allows you to collaborate with others in real time by sharing your VS Code environment. Itโs great for pair programming and code reviews.
๐ก How it helps: Enables real-time collaboration and pair programming.
42. YAML ๐
YAML adds support for YAML files in VS Code. It includes features like syntax highlighting, validation, and IntelliSense.
๐ก How it helps: Enhances YAML editing with syntax highlighting and validation.
43. Markdown All in One ๐
Markdown All in One is a comprehensive Markdown extension that includes features like shortcuts, table of contents, and preview enhancements.
๐ก How it helps: Provides a complete Markdown editing experience with various useful features.
44. HTML Boilerplate ๐
HTML Boilerplate provides a basic HTML5 template to kickstart your web projects. Itโs perfect for quickly generating a standard HTML5 file.
๐ก How it helps: Saves time by providing a ready-to-use HTML5 template.
Download HTML Boilerplate here.
45. Pylance ๐
Pylance is an extension for Python development that provides fast and feature-rich language support, including type checking and IntelliSense.
๐ก How it helps: Enhances Python development with improved language support and type checking.
46. Docker Explorer ๐ณ
Docker Explorer provides a user interface to manage Docker containers and images from within VS Code. Itโs great for visualizing and controlling your Docker environment.
๐ก How it helps: Provides a visual interface for managing Docker containers and images.
Download Docker Explorer here.
47. Nginx ๐ต๏ธ
Nginx supports editing Nginx configuration files with syntax highlighting and autocompletion. Itโs useful for managing and configuring Nginx servers.
๐ก How it helps: Enhances editing and managing of Nginx configuration files.
[Get N
ginx here](https://marketplace.visualstudio.com/items?itemName=nginx.nginx).
48. SQLTools ๐๏ธ
SQLTools is a SQL management tool that supports multiple databases and allows you to run queries and manage database connections from within VS Code.
๐ก How it helps: Simplifies database management and query execution directly from VS Code.
49. Code Spell Checker ๐ก
Code Spell Checker helps catch common spelling mistakes in your code comments, strings, and plain text files.
๐ก How it helps: Improves code quality by identifying spelling errors in comments and text.
50. Better Comments ๐
Better Comments enhances readability by allowing you to categorize and color-code comments in your code. It makes it easier to navigate and understand comments.
๐ก How it helps: Improves comment readability and organization with color-coded categories.
Download Better Comments here.
๐ Level Up Your Coding with These Extensions! ๐
So, there you have it! Whether you're a newbie or a seasoned pro, these VS Code extensions will save you time, reduce errors, and help you code more efficiently. Who knows, with all this extra time, you might even get a few more hours of sleep! ๐ด
Which extension are you most excited to try? Let me know in the comments below! ๐ฌ๐
The process of creating this blog took days โณ.Your feedback and comments would be greatly appreciated ๐ฌ, as they inspire me to continue creating more content like this ๐ก.
This post was written by me with the assistance of AI to enhance its content.
LET'S #CONNECT๐๐ป
Top comments (62)
It would be wiser to talk about the new features in VS Code rather than suggest deprecated extensions.
I don't want to come across as rude or anything; I use a few of the extensions you listed and they're pretty nice, but this seems very outdated, and considering it was only shared today, and a lot of them are just built-in now...
A quick test of several of your comments and your post itself in GPTZero reveal an 89% chance of AI generated text. I don't have anything against this, but posts that promote deprecated extensions or code practices in general are actually harmful to the developer community. It would be best if you mentioned that the post was AI generated.
I'll be sure to support any accurate content you post! ๐
I recently made post about the same topic:
7 BEST VS Code Extensions for Faster Development โ 2024 Edition ๐
Best Codes ใป Sep 14
Thank you for your feedback! Iโll definitely take your suggestion into consideration for future posts
Man, i know you made a great list, and gave so much time in this to write, but here are some quick recommendation for YOU, so many extention repeated ( it's tough to calculate which included or not ), if you're gonna say that use bracket pair colonizer 2 then why included it's first part, also this is not that Relevant extention,
For ALL OF YOU/US who made list of extensions
Some general recommendation/suggestions to all, I prefer to use my own snippets, or vsc suggested snippets, so don't fall for any snippets extentions, they just increase load of your pc and so many extentions degrades performance of vsc, and most snippets from this extentions are already listed in your vsc suggestions,
Also one last thing, there were so many extention in this list which are best and I also use them on my regular basis like
Git related extentions, prettier, code spell checker, code matrices, sonar lint ( although I don't use this extention but many of you may like it ), peacock ( only if you work on multiple workbench simultaneously ), color highlight, better comments,
I guess, it would be very helpful if I make a post about extentions list๐๐
Btw great list, I don't know many of them cause I just reached to react in my journey ( yeah, im noobie )
Thanks for checking out my blog post! ๐ I noticed that I accidentally listed two extensions twice. ๐ Iโll correct this in the updated version.
If you have any more feedback or suggestions, feel free to let me know. Thanks for your support! ๐I also regularly use great tools like Git extensions, Prettier, Code Spell Checker, Code Metrics, and others. ๐Creating a post about the best extensions sounds like a fantastic idea! When you create it, send it my way so I can review it! ๐ฉ๐
Indeed, thanks for not taking my reply as rude behavior ๐ ๐
welcome buddy !
Sorry I've stop reading as soon as I've seen the sync addon.. This is now part of vscode since at least two years... And Bracket color is also useless since, too, part of vscode since a long time. Core feature is more optimized than the extension, Microsoft has published an article here.
Publishing an article with obsolete extensions (not needed anymore) isn't serious, sorry.
I get your point, but this list covers 50 extensions, so naturally, I included older ones too. Not everyone is aware of every update, and these extensions are still relevant for many users. If you're looking for a list of just brand-new features, this post might not be for you.
You should not include older extensions just because you need to include 50. You should write an article, then make a cool title, not write your title and try to match it with your article.
But that's the problem with such listings... People will read, install and keep them. And perhaps share the list elsewhere.
Please before publishing something, remove obsolete information.
but not everyone is aware of which extensions are obsolete or replaced by built-in features.
Iโll make sure to remove outdated info in future updates
I hope I'm not being too insistent, but in my opinion, the person writing an article like yours should first check that the extensions are still relevant.
Where can i find the article?
the post was written by me! ๐ Though I did use AI for some help with formatting and ideas you only find it here only
code.visualstudio.com/blogs/2021/0...
Already three years that such extensions are no more needed since built-in
I agreeโฆ
Debugger for Chrome
This extension has been deprecated as Visual Studio Code now has a bundled JavaScript Debugger that covers the same functionality.
Thanks for pointing that out! Youโre absolutely right
It's cause they used AI to write the article, and then didn't proofread it
Thanks alot. I have used lot of msaccess vba, ooking to findout features to separate the code blocks separately and work in isolation.
BlockMan is closest to that.
Is there any other extension that can do it??
Thanks again
You're welcome! Check out VSCode Comment Anchors for managing and isolating code blocks.
Interesting, thank you!
There's a typo for item #25: the title for "Blockmam" should be "Blockman" :)
I'm impressed! Catching that tiny typo shows you really paid attention I love that kind of feedback because it makes the content better for everyone.
Rest Client ( 17th ) is really epic, special for API works, and performance test.
Makes the workflow much smoother
Yes, vim it's amazing, I hope more people use it so MS keeps releasing new features.
Totally agree! ๐ฏ Vim is an awesome tool, and the more people use it, the better itโll get. Let's hope Microsoft keeps the updates coming! ๐
Nice!
thanks a lot โค๏ธ
I switched from Tabnine to Codeium.
Nice switch!๐ค๐ป
thank's, there is an extension that i forgot to use
Youโre welcome! ๐ Glad the list reminded you of an extension you forgot.
Thanks for your amazing suggestions, I hope to check this out as it will really help me a lot, I have not heard about some of them before. I will sure give a trial.
Weldon
You're welcome! ๐ Definitely give them a try, and feel free to reach out if you need more tips. Good luck! ๐
Awesome!
Glad you liked it
I use GitLens daily, but just learned so much more about it. Such a neat and useful tool!
Thanks ! ๐ Glad to hear you're already a GitLens user and found some new tips
yes; github.com/Avaiga/taipy is a good VSCode extension as well
Thanks for the suggestion! ๐looks interestingโIโll definitely check it out. Appreciate the recommendation! ๐
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