DEV Community

loading...

Best extensions for VS Code in 2020

tumee profile image Tuomo Kankaanpää ・2 min read

A while back I shared my favourite VS Code extensions exclusively to the CodePulse newsletter subscribers. I now decided to share them with all of you!

If you are not yet subscribed to the newsletter, be sure to do it now! Doesn’t cost you anything.

I’ve been using VS Code quite a while now and even though the plain editor is great, there is plenty of useful extensions that you can install to make it even better. Here are some of my favourites.

GitLens

GitLens extension

GitLens supercharges the Git capabilities built into Visual Studio Code. With it you can easily and fast see who/when/why given code was added which gives you better understanding of the code at hand. I absolutely love this extensions since I no longer have to browse through Git logs or commits to find when part of the code was added and who committed it.

You can find it from the Visual Studio Marketplace: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Highlight Matching Tag

Highlight matching tag extension

This extension helps in matching opening and closing tags. I have found it very handy especially with larger components and elements that have many nested elements inside of them.

You can find it from the Visual Studio Marketplace: https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

Settings Sync

Settings sync extension

Useful if you have multiple computers you work on. This extension synchronizes settings, snippets, tehems, file icons, launch, keybindings, workspace and extensions across multiple machines using GitHub Gist.

You can find it from the Visual Studio Marketplace: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Import Cost

Import cost extension

For me this is in some projects a lifesaver. When you need to make your bundle as small as possible this extension is very handy. It 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.

You can find it from the Visual Studio Marketplace: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Do you think I missed some? Comment below your favourite extensions!


Originally published at codepulse.blog on April 2, 2020.

Discussion

pic
Editor guide
Collapse
jeroenrombouts profile image
Jeroen Rombouts

In the same vain as Highlight matching tag: marketplace.visualstudio.com/items... is handy for finding matching opening and closing brackets in javascript and Typescript files.

Collapse
tahir500 profile image
tahir iqbal

Another really good extension which i used in vs code editor is Prettier, it is used for code formatting

Collapse
sanidz profile image
sanidz

+Githistory, Swagger Viewer, NX Console

Import Cost -> doesnt make sense for Angualar anymore since treeshaking gets rid of unused imports, but nevertheless usefull feature.

Collapse
fibric profile image
Denny Trebbin

GitLens shows the git history per line per file. GitHistory is redundant in this post.

Collapse
sanidz profile image
sanidz

Agree, but GitHistory does offer better comparison of commits.
I dont need it that offten, but when I do its really handy.