Enhance Your Coding Journey: 17 Must-Try VS Code Extensions for Enhanced Productivity and Time Savings
Tags: programming, vscode, productivity, webdev
Published: 2024-02-25 06:43:08

In the ever-evolving landscape of Visual Studio Code (VS Code) extensions, there are several must-haves that significantly enhance the coding experience, productivity, and overall development workflow. Here, we explore some of the most valuable extensions, each with unique features that cater to different needs.

## 1. Excalidraw

- Description: Draw schemas directly in VS Code using Excalidraw.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor) )**
- Try the web version: **( [👉 Click Here](https://excalidraw.com/) )**

![Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh0sfg02wn3ih3nrk2tj.png)

Excalidraw is a powerful tool for creating diagrams and schemas within VS Code. It allows for quick and easy sketching, making it an invaluable asset for developers looking to visualize their ideas or architectures directly in their coding environment.

<hr>

## 2. Draw.io Integration

- Description: This unofficial extension integrates Draw.io into VS Code.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) )**
- Try the web version: **( [👉 Click Here](https://app.diagrams.net/) )**

![Image](https://github.com/hediet/vscode-drawio/raw/HEAD/docs/demo.gif)

This extension brings the popular diagramming tool Draw.io into VS Code, enabling users to create and edit diagrams directly within their editor. It's a handy tool for developers working on projects that require clear, visual documentation.

<hr>

## 3. Andromeda Theme

- Description: Dark theme with a taste of the universe.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda) )**

![Imagdescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2fieplptkvribvwuc66.png)

Andromeda offers a unique dark theme inspired by the cosmos, providing a visually appealing and comfortable coding environment. It's perfect for developers who prefer dark themes and are looking for something more than the standard options.

<hr>

## 4. Better Comments

- Description: Improve your code commenting by annotating with alert, informational, TODOs, and more!
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) )**

![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3rw5az1gxr8mlfexy59.png)

Better Comments enhances the way you comment your code by allowing you to annotate comments with different styles, such as alerts, informational messages, and TODOs. This helps in making your code more readable and maintainable.

<hr>

## 5. GitHub Copilot

- Description: Your AI pair programmer.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) )**

![Imagedescription](https://user-images.githubusercontent.com/37570492/212965036-26579d9f-cfaf-44eb-90fb-76421dc7ab9d.gif)

GitHub Copilot is an AI-powered coding assistant that helps you write code faster by suggesting lines or blocks of code as you type. It's an incredible tool for developers looking to improve their coding efficiency and explore new coding techniques.

<hr>

## 6. GitHub Copilot Chat

- Description: Whether you're troubleshooting a bug or crafting a new feature, GitHub Copilot is here to assist when you encounter challenges.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) )**

![Imagedescription](https://raw.githubusercontent.com/microsoft/vscode-copilot-release/eb3d99cff89998d9674704bf8111c3ddf7bd23a1/hero.gif)

GitHub Copilot Chat is a companion extension to GitHub Copilot that provides conversational AI assistance throughout your software development journey in VS Code.

<hr>

## 7. Codachi

- Description: Your digital pet inside VSCode.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=Pegleg.codachi) )**

![Imagedescription](https://github.com/blairjordan/codachi/raw/main/media/screenshot1.gif)

Adds cute monster pets to your workspace to encourage productivity.

<hr>

## 8. Jupyter Notebook Extension

- Description: Jupyter notebook support, interactive programming and computing that supports Intellisense, debugging and more.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) )**

![Imagedescription](https://github.com/Microsoft/vscode-jupyter/raw/HEAD/images/Jupyter%20README/notebookui.png)

A Visual Studio Code extension that provides basic notebook support for language kernels that are supported in Jupyter Notebooks today, and allows any Python environment to be used as a Jupyter kernel. This is NOT a Jupyter kernel--you must have Python environment in which you've installed the Jupyter package, though many language kernels will work with no modification. To enable advanced features, modifications may be needed in the VS Code language extensions.

<hr>

## 9. Phind.com - Chat with your Codebase

- Description:  AI answers using your codebase context.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=phind.phind) )**
- Try the web version: **( [👉 Click Here](https://www.phind.com/search?home=true) )**


![Image1 description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzps57fff9cl97ae7z9p.png)

![image](https://phind-extension-public-assets.s3.us-east-1.amazonaws.com/inline-mentions.gif)

Provides Better answer with links and source than ChatGPT. It is mixture of both Bard and ChatGPT 

<hr>

## 10. LeetCode

- Description: Solve LeetCode problems in VS Code
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=LeetCode.vscode-leetcoder) )**

![Imagedescription](https://raw.githubusercontent.com/LeetCode-OpenSource/vscode-leetcode/master/docs/gifs/demo.gif)

Solve LeetCode problems in VS Code. You can access all the problems of leetcode. Read The Question and can also directy test and run the solution in vscode and can also submit to leetcode.

<hr>

## 11. Tabnine: AI Autocomplete & Chat

- Description: AI coding assistant with AI code completions
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) )**

![Imagedescription](https://raw.githubusercontent.com/codota/tabnine-vscode/master/assets/completions-main.gif)

AI coding assistant with AI code completions and AI code chat right in the IDE, helping developers by generating code, writing unit tests and documentation, explaining legacy code, and much more. Tabnine supports all major languages including JavaScript, Python, Java, Typescript c/c++ and more.

<hr>

## 12. Shortcut Menu Bar
- Description: Add handy buttons like beautify, show opened files, save, toggle terminal, activity bar etc to editor menu bar. User-defined buttons are also possible.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=jerrygoyal.shortcut-menu-bar) )**

![Imagedescription](https://github.com/GorvGoyl/Shortcut-Menu-Bar-VSCode-Extension/raw/HEAD/images/1.jpg)

Add 35+ handy buttons like beautify, show opened files, save, toggle terminal, activity bar, Find replace etc to the editor menu bar in VSCode. You can also create your own buttons with custom commands.

<hr>

## 13. Snippet
- Description: Extension for creating code and managing user defined code snippets.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=devonray.snippet) )**

{% embed https://youtu.be/cc115SUroJI?si=jZ0tIh04cnSshcI1 %}

Vscode extension that allows users to create and insert user defined code snippets. 

<hr>

## 14. Thunder Client

- Description: Lightweight Rest API Client for VS Code
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) )**

![Imagedescription](https://github.com/rangav/thunder-client-support/blob/master/images/thunder-client-v2.png?raw=true)

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code. Almost Similar to postman but its better cause it is integrated with Vscode , You can test api directly in vscode

<hr>

## 15. TODO Highlight

- Description: Highlight TODOs, FIXMEs, and any keywords, annotations...
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) )**

![Imagedescription](https://github.com/wayou/vscode-todo-highlight/raw/master/assets/toggle-highlight.gif)

![Imagedescription](https://github.com/wayou/vscode-todo-highlight/raw/master/assets/list-annotations.gif)

Highlight TODO, FIXME and other annotations within your code. Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.
<hr>

## 16. CodeTour

- Description:  Code extension that allows you to record and playback guided tours of codebases, directly within the editor.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) )**
- 🎥 Demo Look: **( [👉 Click Here](https://user-images.githubusercontent.com/116461/76165260-c6c00500-6112-11ea-9cda-0a6cb9b72e8f.gif) )**

![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8c4i08dxm3uap4ch4pr.png)

CodeTour is a Visual Studio Code extension, which allows you to record and play back guided walkthroughs of your codebases. It's like a table of contents, that can make it easier to onboard (or re-board!) to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change. 

## 17. Vscode-pdf

- Description:  Display pdf file in VSCode.
- 🔗 VS Marketplace Link: **( [⬇️ Install Extension](https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf) )**

![Imagedescription](https://user-images.githubusercontent.com/3643499/84454816-98fcd600-ac96-11ea-822c-3ae1e1599a13.gif)

Display pdf in VSCode.

<hr>

> Feel free to drop your comments below and share your favorite extensions. Your feedback and contributions are always appreciated!