DEV Community

Kaushal
Kaushal

Posted on

VS Code Extensions to have

I saw many posts showing what extensions one can have to improve their productivity and i thought lets share what I use too (except which are very common now like prettier, eslint, console ninja, etc), may be it will help people on top of what they already are using.

So here is a list of what extensions I use:

- Visual Studio Code Commitizen Support

Image description

It basically helps to write proper commit messages. With this extensions you can just press Mac: cmd + shift + p and windows: ctrl + shift + p and type commitizen and u will choose this option

Image description

after that just follow the steps and u will have a proper standardized commit message

- Sort Lines
Image description

Sometimes you need to have ur imports or exports in some alphabetical order either ascending or descending this extension will help you with that easily. Just select the lines you want sort and then just press Mac: cmd + shift + p and windows: ctrl + shift + p and type sort and u will see this

Image description

Choose which option you want and thats it.

- JSDoc Generator
Image description

Sometimes you just don't want to use the typescript or even if you are using it and want to describe your functions/components so anyone who is using them will know what a prop/param means or what the function is doing but don't want to write all that comments manually then this extension will help you with that.
Just go into the file which u want to generate the comments for and press Mac: cmd + shift + p and windows: ctrl + shift + p and type jsdoc and you will see this:

Image description

You can either choose the first option or the second option, most of the time i just use the second option and thats it you will have the proper syntax and everything generated u can ofcourse edit it more to make it more readable however u want but atleast it will do the initial work of writing comments for u

- Git Graph

This extension will help you visulize ur git and github branch graphs locally

Image description

Image description

Thank you and please do share your experience with these extensions
as well as the extensions you are using.

Top comments (8)

Collapse
 
web-dev-codi profile image
Web-Dev-Codi

Finally a VScode extension list that isn't a rewrite of the generic go-to's. Great article.

Collapse
 
kaushal01 profile image
Kaushal

Thnx

Collapse
 
ipseitas profile image
ipseitas

I mean, it may not be a rewrite, but it's barely anything new.
VS Code extensions are planty, but few useful (when not working with JS/TS)...

Collapse
 
kaushal01 profile image
Kaushal

Yea true nothing is new but i think its just the matter of what is new to u. I mean these r popular extensions but not everyone knows abt them so they could be useful to some not to all

Thread Thread
 
ipseitas profile image
ipseitas

Also kinda yes but then these are kinds of stuff that will just pop up on top of you describe a common problem that you'd like to solve, like "gen docs" or "sort lines".
There's plenty of extensions that may be harder to come around because it's not about the "code problems".
For example there's an extension that let's you (un)bookmark a line and go back or forward of your list of bookmarks using 3 key combos.
There's also an extension that adds back/forward buttons on Mac touch bar so you can jump between your recent cursor locations.
Lifesaver tbh.

Collapse
 
steevel_sharonsalis_a228 profile image
Steevel sharon Salis

Thanks for the list. Could you please let me know which VS Code theme you are using? (It looks elegant in screenshots)

Collapse
 
kaushal01 profile image
Kaushal

yes this is the theme that i am using Name: One Dark Pro++
Id: HRMRafsanAmin.onedarkproplusplus
Description: A theme extending One Dark Pro.
Version: 1.1.0
Publisher: HRM Rafsan Amin
VS Marketplace Link: marketplace.visualstudio.com/items...

Collapse
 
steevel_sharonsalis_a228 profile image
Steevel sharon Salis

Thanks you