DEV Community

Cover image for Visual Studio Code extensions to help your productivity
Mr F.
Mr F.

Posted on

Visual Studio Code extensions to help your productivity

Microsoft have made some amazing contributions to the dev community, Visual Studio Code in particular. I recently made the switch to VSCodium but this doesn't stop me from using all the same extensions as before.

I'm going to share some extensions I use to make my experience more productive and helpful. Hopefully there will be something useful for you to add to you setup.

Project level extensions

Gistpad

...manage GitHub Gists entirely within the editor. You can open, create, delete, fork, star and clone gists, and then seamlessly begin editing files as if they were local...

I've gone through my fair share of third party apps to manage my gists, this is a welcome addition to vscode.

gistpad animation

TODO Tree

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.

This is really helpful when working in a team or on projects you pick and drop over time.

screenshot

Gitlens

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

gitlens preview

Project Manager

...helps you to easily access your projects, no matter where they are located... You can define your own Favorite projects, or choose for auto-detect VSCode projects, Git, Mercurial and SVN repositories or any folder.

project manager sidebar

Code level extensions

Tech Debt Tracker

Inline debt ratings, the debt ratings tree, and the function metrics keep quality front of mind. Every function is analysed live & locally to help you write clean code and identify code that needs to be improved.

Tech Debt Tracker sends anonymous analytics back to the publisher, which you can turn off from settings if you need to.

What I particulary like about this extension is the inline debt rating at the top of your file.

screenshot

Code Complexity

Computes complexity in TypeScript / JavaScript / Lua files. It's not a standard metric, but it is a close approximation of Cyclomatic complexity.

Just like the previous extension, this puts a handy inline notice at the top of the file.

screenshot

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

screenshot

UI level enhancements

Bracket Pair Colorizer 2

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

screenshot

Indented Block Highlighting

Highlights the intented area that contains the cursor.

This might be a little overkill, but I like it combined with Bracket Pair Colorizer.

demo

Indenticator

Visually highlights the current indent depth

demo

Image Preview

This handy extension allows you to see image previews in the gutter or on hover.

screenshot

There are plenty more extensions, but these are the ones I enjoy using. Hopefully there is something new here for you or you can suggest something, I'm always looking for ways to make my development experience better!

Top comments (14)

Collapse
 
desenfirman profile image
Dese Narfa Firmansyah

Wakatime.com . Probably not a purely extension, but it's a service which have Visual Studio Code extension. It's a services which track what project you spent on, what files in project you spent on and how many hour you spent β€” let say, for today β€” in front of your editor. It's a good tool for tracking productivity over time.

My gosh, gotta learn some structure and grammar. Sorry for my bad English.

Collapse
 
yogat3ch profile image
Stephen Synchronicity

Thanks for posting this @desenfirman ! Its the only extension mentioned on this page that I could immediately see the utility of!

Collapse
 
0xdonut profile image
Mr F.

Never apologise, it's all good!

I used wakatime once before, but ultimately it's not improving my productivity so I uninstalled it. Nice but useless metrics :)

Collapse
 
vip3rousmango profile image
Al Romano

Gistpad! 😍😍

Collapse
 
giorgosk profile image
Giorgos Kontopoulos πŸ‘€

@0xdonut gitlens is an absolute must for anyone that uses git

Collapse
 
ankitbeniwal profile image
Ankit Beniwal • Edited

I am here for the cover gif πŸ˜‚

Never knew we can use gifs.

Collapse
 
basarozcan profile image
Başar Γ–zcan

Gistpad is nice addition to my extensions. Thank you

Collapse
 
jpcardoso89 profile image
JoΓ£o Paulo Cardoso

thx, i didn't know these extensions :D

Collapse
 
nguyenquangtin profile image
Tony Tin Nguyen

Thank you for your post.

Collapse
 
shiponkarmakar profile image
Shipon Karmakar

Thank you for your post. ❀

Collapse
 
hedyhli profile image
hedy • Edited

Bookmarks is awesome too, you can toggle a bookmark on a line, and find it later when needed.

Collapse
 
meqdad_dev profile image
Meqdad Darwish

Great tools

Collapse
 
orest22 profile image
Orest

Thanks for project manager. I got confused, you are suggesting not to use a VS code but use Tech Debt Tracker extension which in theory can do the same thing.

Collapse
 
0xdonut profile image
Mr F. • Edited

True I do mention above that you can turn that off in settings or you need to, so the option is there. Nonetheless these extensions are aimed at visual studio code and vscodium users alike.