10 Unique VS code extensions- Boost Your Productivity😎
Tags: productivity, vscode, webdev, github
Published: 2021-01-06 19:20:43

## [1. Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i7riwlpcfsvh986gurnb.png)
This extension is very useful if you have a habit of writing to-do lists while coding/code reviewing, etc. This extension quickly searches (using ripgrep your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.

---

## [2. code time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode)

Code Time is an open-source plugin for automatic programming metrics and time tracking. Get the most advanced time tracker for Visual Studio Code that will save you time, so you can focus more on what matters. An awesome extension to keep track of your work-life balance. One interesting thing about this extension is that you get a personalized dashboard for your coding activity.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/igldr8k0jzpvqla8z04y.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/otxmvqjoctiq8xvqxuw9.png)

---

## [3. faker](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vbujsahlmcf1ashc29bx.gif)

This extension can be used to generate fake data inside Visual Studio Code. This comes in handy when you are creating webpages with dummy data for client presentation.

Here is the list of fake data you can generate:

- address
- commerce
- company
- database
- date
- finance
- hacker
- image
- internet
- lorem
- name
- phone
- random
- system 

Type cmd+shift+p to launch command palette and choose Extensions

---

## [4. Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tsvzo499xw9qq2mgm8z9.gif)

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. This will make prototyping, learning, and testing JavaScript / TypeScript blazingly fast.

---

## [5. Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p92ii6en1sa15gbjxdf6.gif)

Shows the current regular expression's matches in a side-by-side document. This can be turned on/off with Ctrl+Alt+M (⌥⌘M).

Global and multiline options can be added for evaluation with a side-by-side document through a status bar entry. This can be useful when the side-by-side document has multiple examples to match.

---

## [6. Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lebr8b1x8fxt7e5vgi5q.png)

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

---

## [7. Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/15vvvghtknk1jyfqj695.gif)

When you rename one HTML/XML tag, this extension will automatically rename the paired HTML/XML tag

---

## [8. GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/732tfhnnebyaypsxuev6.gif)

Gittens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

---

## [9. Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7et7phkn1rglf9c7k4m2.gif)

This extension makes debugging much easier by automating the operation of writing a meaningful log message.

It requires only two steps 

- Selecting the variable which is the subject of the debugging

- Pressing ctrl + alt + L

---

## [10. Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/muiv4c5wopj3v0l6vyjx.png)

It 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.

Here are some of the features that Bookmarks provide:

- Mark/unmark positions in your code
- Mark positions in your code and give it a name
- Jump forward and backward between bookmarks
- Icons in gutter and overview ruler
- See a list of all Bookmarks in one file and project
- Select lines and regions with bookmarks
- A dedicated Side Bar

---

# Interesting extensions from comments

## [1. Music Time for Spotify](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.music-time)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/utrvf0rjidywj93bmw2b.png)

Music Time, another plugin courtesy of Code Time, is pretty awesome too, especially if you already use Code Time. It discovers the most productive music to listen to as you code.

Music Time requires a Spotify account. They currently do not support Apple Music, Google Play, or any other players, but may in the future plugin.

Thanks {% user killshot13 %} for suggesting this.

---
## [2. GitLive](https://marketplace.visualstudio.com/items?itemName=TeamHub.teamhub)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fdcjfsdm7bt1dn2icrnv.gif)

GitLive allows you to view, share and edit code together with your team, live, across VS Code and JetBrains

- Check who is online from your team and which repositories, branches, and issues they are working on
- Inspect and cherry-pick your teammates' local changes without performing a commit-push-fetch-merge cycle
- Open a live view of the file a teammate is working on and edit it together
- Privacy-first: Easily control what you share including your online status, activity, and local changes

Thanks
{% user stecagnieszka %} for suggesting this

---

## [3. tl;dr pages](https://marketplace.visualstudio.com/items?itemName=bmuskalla.vscode-tldr)

Provides TLDR hover information for common commands in bash/docker files/PowerShell files. TLDR pages are a collection of simplified and community-driven man pages.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zcezcdcwkirqnvoxu35n.gif)

The hovers are available in the following language modes:

- Dockerfile
- Shell script
- Powershell
- Makefile
- Batch

Thanks {% user bmuskalla %} for creating and suggesting this

---

That's all for this post folks.
Don't forget to ❤ or 📑 this article if you enjoyed it.

Have a great day.
Happy Coding!!