In this article, we uncover 20 hidden gems — VS Code extensions you’ve probably never heard of but absolutely need to try 👀 🚀
Photo by Chris Ried on Unsplash
Visual Studio Code (VS Code) is the go-to editor for developers worldwide, offering a treasure trove of extensions to customize and enhance your workflow. While popular tools like Prettier and Live Server often steal the spotlight, there’s a whole world of lesser-known extensions that can truly supercharge your productivity.
1. Peacock
Description: Working with multiple VS Code instances? Peacock lets you color-code your editor windows for better context switching.
Use Case: Easily identify your workspace when juggling multiple projects.
Install: Peacock
2. Code Time
Description: Gain insights into your coding habits with this productivity tracker. It integrates seamlessly with your workflow without being intrusive.
Use Case: Track your coding hours, focus time, and efficiency metrics.
Install: Code Time
3. Todo Tree
Description: Automatically find and organize your TODO, FIXME, or other comments in your project.
Use Case: Manage your tasks directly from the sidebar without losing track of them.
Install: Todo Tree
4. Polacode
Description: Need to share beautiful code snippets? Polacode generates picture-perfect images of your code in seconds.
Use Case: Create polished visuals for documentation or social media.
Install: Polacode
5. Error Lens
Description: Supercharge your debugging process by highlighting errors and warnings inline in your code.
Use Case: Avoid flipping between the problems panel and your code.
Install: Error Lens
6. GitLens
Description: A powerful extension for visualizing and navigating your Git repository.
Use Case: Explore commit history, file blame annotations, and branch comparisons effortlessly.
Install: GitLens
7. Better Comments
Description: Make your comments more readable and meaningful with color-coded categories like TODO, NOTE, and IMPORTANT.
Use Case: Collaborate effectively with teammates using well-organized comments.
Install: Better Comments
8. Quokka.js
Description: Get real-time feedback on your JavaScript and TypeScript code with this interactive playground.
Use Case: Test and debug snippets quickly without leaving your editor.
Install: Quokka.js
9. CSS Peek
Description: Navigate directly to CSS definitions in your project.
Use Case: Quickly jump between HTML elements and their corresponding CSS styles.
Install: CSS Peek
10. REST Client
Description: Test APIs without leaving VS Code. This extension is a lightweight alternative to Postman.
Use Case: Make HTTP requests directly from your editor.
Install: REST Client
11. Git Graph
Description: Visualize your Git repository’s commit graph with a simple UI.
Use Case: Understand your project’s history and branches at a glance.
Install: Git Graph
12. Bracket Pair Color DLW
Description: Assign colors to matching brackets for better readability in complex code.
Use Case: Navigate deeply nested code structures without confusion.
Install: Bracket Pair Color DLW
13. vscode-icons
Description: Add visually appealing file and folder icons to your workspace.
Use Case: Quickly identify file types at a glance.
Install: vscode-icons
14. Highlight Matching Tag
Description: Automatically highlight matching HTML and XML tags to ensure proper nesting.
Use Case: Avoid syntax errors in web development.
Install: Highlight Matching Tag
15. Bookmarks
Description: Bookmark lines of code and jump between them effortlessly.
Use Case: Navigate large codebases with ease.
Install: Bookmarks
16. Excel Viewer
Description: View and edit Excel files directly in VS Code.
Use Case: Analyze data without switching to another tool.
Install: Excel Viewer
17. Path Intellisense
Description: Autocomplete file paths in your project.
Use Case: Save time while importing or linking files.
Install: Path Intellisense
18. SQLTools
Description: A database management extension that allows you to connect to SQL databases, execute queries, and explore schemas — all within VS Code.
Use Case: Manage your backend databases without leaving your code editor.
Install: SQLTools
19. Git Blame
Description: Provides a simple interface to view git blame information directly in the VS Code editor. It shows who last modified a line of code and when, without needing to open the terminal or command line.
Use Case: Perfect for quickly tracking down the history of a specific line of code and understanding who to approach for questions regarding that section.
Install: Git Blame
20. WakaTime
Description: Track your coding activity across projects and languages.
Use Case: Gain insights into your productivity over time.
Install: WakaTime
Final Thoughts
These hidden gems are powerful yet often overlooked. Integrating them into your workflow can save you time, simplify tasks, and even make coding more enjoyable. So, go ahead and give these underrated extensions a shot!
Do you know of any other lesser-known yet awesome extensions? Share your favorites in the comments below.
Connect with Me on Social Media
🐦 Follow me on Twitter: devangtomar7
🔗 Connect with me on LinkedIn: devangtomar
📷 Check out my Instagram: be_ayushmann
Ⓜ️ Checkout my blogs on Medium: Devang Tomar
#️⃣ Checkout my blogs on Hashnode: devangtomar
🧑💻 Checkout my blogs on Dev.to: devangtomar
Top comments (0)