VS Code Extensions to have
Tags: webdev, javascript, vscode, extensions
Published: 2024-06-02 19:58:06

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:

[**<u>- Visual Studio Code Commitizen Support</u>**](https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-commitizen)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6in0xnvwm8jz8hrj51jx.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieas6qlvd25go11r5eof.png)

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

[**<u>- Sort Lines</u>**](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy6xahmun8j3fcolk7rc.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k19iu8ua63x7v19740h.png)

Choose which option you want and thats it.

[**<u>- JSDoc Generator</u>**](https://marketplace.visualstudio.com/items?itemName=crystal-spider.jsdoc-generator)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl798qpymphamd495bal.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1bq66n6025s2bmnwqxz.png)

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

[**<u>- Git Graph</u>**](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhw97rupy7s1x08yoawg.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l7b9hdydas3m8vs6kxp.png)



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