DEV Community

loading...
Cover image for 10 Unique VS code extensions- Boost Your Productivity😎

10 Unique VS code extensions- Boost Your Productivity😎

kedark profile image Kedar.K Updated on ・4 min read

1. Todo Tree

Alt Text
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

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

Alt Text


3. faker

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

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


8. GitLens — Git supercharged

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

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

killshot13 image
for suggesting this.

2. GitLive

Alt Text

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

stecagnieszka image
for suggesting this

3. tl;dr pages

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

The hovers are available in the following language modes:

  • Dockerfile
  • Shell script
  • Powershell
  • Makefile
  • Batch

Thanks

bmuskalla image
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!!

Discussion (9)

pic
Editor guide
Collapse
bmuskalla profile image
Benjamin Muskalla

May I suggest vscode-tldr to quickly see summarized man pages for common commands in scripts and Dockerfiles

tldr hover in script editor

Collapse
kedark profile image
Kedar.K Author

This is interesting! Thanks for suggesting.

Collapse
shrihankp profile image
Shrihan Kumar Padhy

In newer versions of Visual Studio Code, it has built-in support for auto renaming the other tag when one of the pair of tags changes. But, I really like the Auto Rename Tag extension and I prefer the latter to the former, mainly because it also completes JSX and Vue templates, while VS Code doesn't.

Collapse
stecagnieszka profile image
Agnieszka Stec

Very good list, I will definitely try out Bookmarks! Since the article is about extensions that help to boost productivity, I hope it's ok to suggest for consideration the extension we've been developing at GitLive: a real-time collaboration and communication tool for dev teams. Useful if you think that screen-sharing is a hassle, or look for an efficient way to avoid merge conflicts :)
Cheers!

marketplace.visualstudio.com/items...

Collapse
kedark profile image
Kedar.K Author

Wow this is amazing. I will add it to the list and will definitely start using it. Thanks for the comment.

Collapse
killshot13 profile image
Michael R.

@kedark great article thanks for uncovering some original and unique ideas here for VS Code.

Music Time, another plug in courtesy of Code Time, is pretty awesome too, especially if you already use Code Time and you like Spotify. 😏

Cheers!

Collapse
kedark profile image
Kedar.K Author

@michael , glad that you liked the article. And Thanks for mentioning Music Time, this is absolutely amazing extension that I just discovered. I’ll definitely add this to the list above.

Collapse
mike_hasarms profile image
Mike Healy

I'll be using the Bookmarks extension now

Collapse
who8mypnuts profile image
Stan

These are great, but something so simple like the auto-rename tag... now that's a good one!