21 VS Code Extensions To Boost Your Productivity
Tags: webdev, programming, vscode, productivity
Published: 2024-06-02 10:38:47

Hello Devs👋

As developers, we spend most of our time in VS Code. In this post, I will be sharing some VS Code extensions that can help boost your productivity and save your valuable time.🕧

Lets get started🚀

## Codiumate

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

> ✨ Codiumate uses AI to Generate tests, Review test results, Fix bugs and errors for code written in various programming languages like Python, JavaScript, TypeScript and Java. It acts as your personal agent or assistant within your IDE.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Codium.codium)

## Partial Diff

![Partial Diff](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uqlcq8e60lkthg7dosx.png)

> ✨ Partial Diff extension allows you to compare different text selections within the same file or across different files, making it easier to spot changes and differences.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)
## Git Graph

![Git Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww8j9qvrsr66wmn0mosw.png)

> ✨ Git Graph extension provides you a visual representation of your Git repository, making it easier to understand and manage branches, commits, and merges also you can perform Git actions from the graph.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
## Path Intellisense

![Path Intellisence](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v22b2kyhxwwfpzpnwtc4.png)

> ✨ Path Intellisense extension extends the default path completion in VS Code to include all available paths in your workspace, even if they are not yet imported.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

## Error Lense

![Error Lense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui3i6k3zm1b64r1ga7xb.png)

> ✨ Error Lens extension enhances your error highlighting in your VS Code by showing error messages directly inline with your code.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)
## SQLTools

![SQLTools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ceg4gtsb96fme1in7z2.png)

> ✨ SQLTools is a lightweight SQL client for VS Code, it offers you database management, query execution, and results the visualization directly within the editor.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools)

## Markdown All in One

![Markdown All in One](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k7dpy89w65i30ggq8ih.png)

> ✨ Markdown All in One extension provides comprehensive support for Markdown editing, including shortcuts, table of contents generation, and more.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

## Turbo Console Log

![Turbo Console Log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ycisuti1dsz1z632olq.png)

> ✨ Turbo Console Log extension automatically adds meaningful console.log statements to your code, which can be a huge time-saver during debugging.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
## Quokka.js

![Quokka.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bko1yy8akuwm36ny4j4u.png)

> ✨ Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

## Project Manager

![Project Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drvs445isps5ydysl58v.png)

> ✨ Project Manager lets you easily switch between different projects in VS Code, make it a quick way to manage and navigate multiple projects.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

## Todo Tree

![Todo Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr5zknvtyuujeipsmbh0.png)

> ✨ Todo Tree extension scans your code for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. 

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

## TabNine

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

> ✨ TabNine is an AI-powered code completion extension that supports multiple programming language, it offers intelligent code suggestions, real-time code completions, chat, and code generation for you.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)

## Better Comments

![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkjarirc3nsaeqg509zr.png)

> ✨ Better Comments extension helps you create or write more human-friendly comments in your code. It allows you to categorize your annotations into alerts, queries, todos, and more with different colors.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

## Polacode

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

> ✨ Polacode is a stylish code screenshot tool that allows you to create beautiful screenshots of your code directly from VS Code.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

## REST Client

![REST Client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s54cm9rrjwllxjipi9y0.png)

> ✨ REST Client allows you to send HTTP requests and view the response directly within VS Code, making it easier to test and debug APIs.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

## HTML CSS Support

![HTML CSS Support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk68l0ra0jjpy07ebe0t.png)

> ✨ HTML CSS Support provides CSS class and id name completion for the HTML class attribute based on the CSS files in your workspace.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

## GitLens 

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

> ✨ GitLens extension supercharges the built-in Git capabilities of VS Code. It helps you visualize code authorship, seamlessly navigate and explore Git repositories, and gain insights into your code.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

## WakaTime

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

> ✨ WakaTime extension provides automatic time tracking for your coding activities. It gives you insights into your coding habits and helps you manage your time more effectively.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

## Bookmarks

![Bookmarks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jn88xn94pg001feiazq.png)

> ✨ Bookmarks extension helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

## PlantUML

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

> ✨ PlantUML extension allows you to create UML diagrams from plain text descriptions, making it easy to visualize and document your system design.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)

## Trailing Spaces

![Trailing Spaces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55wyje0me31nchvmkk6k.png)

> ✨ Trailing Spaces extension highlights and removes trailing whitespace in your code automatically, it helps to keep your code clean and consistent.

🔹Link 👉 [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

That's it for this post. Thank you for reading💖

> Let me know which one you use the most or any other helpful extension in the comments👇

Find Me on 👉 {% cta https://x.com/kiran__a__n %} X {% endcta %} {% cta https://github.com/Kiran1689 %} GitHub {% endcta %}

{% embed https://dev.to/dev_kiran %}