DEV Community

Cover image for Step up Your VSCode Game With These 10 Must-Have Extensions

Step up Your VSCode Game With These 10 Must-Have Extensions

Gaël Thomas on February 06, 2023

Are you looking to take your VSCode game to the next level? Look no further! In this article, we will explore 10 must-have extensions that will enh...
Collapse
 
javifelices profile image
Javi Felices

Hello and thank you very much for the listing.

If I may, the last two extensions are no longer needed, VS Code comes with settings to do just that.

  • Auto Rename Tag can be removed and add this setting to our VS Code:
"editor.linkedEditing": true
Enter fullscreen mode Exit fullscreen mode
  • Bracket Pair Colorized can also be removed, and this setting can be added to our VS Code:
"editor.bracketPairColorization.enabled": true
Enter fullscreen mode Exit fullscreen mode

Then you have more options to customize colors.

About this last one, here is this article in neutron about it

Thanks and best regards.

Collapse
 
gaelgthomas profile image
Gaël Thomas

Thanks, @javifelices! I love your feedback and the resource you provided!

As you mention, the "Bracket Pair Colorizer" extension is now native in VSCode. That's why I recommend changing the setting in the article.

But I didn't know about the "Auto Rename Tag" one; I just added this setting in my VSCode, and it works like a charm. 🙏🤩

Collapse
 
optimbro profile image
Rahul

As a head member of CRA, I love such comments which brings more ideas, and add value to original post. Thanks for "editor.linkedEditing": true suggestion.

Btw, CRA means Comment Reading Association 😂

Collapse
 
javifelices profile image
Javi Felices

It is true that there are many topics about the best extensions for VS Code, I like them a lot, because you can always find one that you don't know.

In this case, I saw those two, which could be removed, because VS Code supports it by default.

And I agree, many times, in the comments you learn a lot.

Best regards and thanks.

PS: Thanks for the explanation of CRA 😉

Collapse
 
lgrammel profile image
Lars Grammel

Wow, great list!

I've recently created an extension that provides Chat-GPT-like functions inside VS Code: marketplace.visualstudio.com/items...

Would love to hear if an extension like this would be useful to you as well.

Collapse
 
gaelgthomas profile image
Gaël Thomas

Thanks for your message, @lgrammel!

Wow, when I opened the extension page, this thing captured my attention: "Generate Tests". I should give it a try; if it's generating great test cases and could make me save a lot of time, that would be awesome. 🤩

Collapse
 
nicoespeon profile image
Nicolas Carlo

The "Generate Tests" is quite interesting indeed!

I tried to use it on some existing (legacy) code and took some notes. I just published them here: dev.to/nicoespeon/can-ai-help-me-w...

That being said, thanks for sharing this list Gaël. I'm definitely gonna have a look at the "Import Cost" one, it's intriguing!

Thread Thread
 
gaelgthomas profile image
Gaël Thomas

Interesting! Thanks for sharing this, @nicoespeon! Writing an article with your notes and feedback on your AI tests is a good idea. I bookmarked to read it later!

Glad you found one intriguing extension. 🙂

Collapse
 
lgrammel profile image
Lars Grammel

It works quite well when you e.g. select a single JS function and then generate tests for that. Usually gets me 60-80% of the way. The code generation takes 30s+ though, because it tends to create a lot of text.

Thread Thread
 
gaelgthomas profile image
Gaël Thomas • Edited

Just tested with a simple React component, and the output was pretty decent. Never thought of using Chat-GPT that way.
I'll have to deep-dive this. Thanks again for the suggestion and for the time saved!

Collapse
 
shanecandoit profile image
outOfBounds

I like "git graph" instead of git lens, it's more lightweight.
"Codebook" is good for a jupyter notebook style experience for javascript, go, and rust.
Of course, Ai auto-complete is cool, see "Copilot" and "TabNine".
Finally, add in a database extension for your db of choice and snippets for your language of choice.

Collapse
 
gaelgthomas profile image
Gaël Thomas

Thanks for sharing these, @shanecandoit!

I didn't know about "Git Graph". It looks good! Is it also highlighting the code ownership when you over a line? I mainly use "Git Lens" for that feature (yes, that's an overkill extension for that 😂).

Btw, I have never tried "CoPilot" or "TabNine" yet!

Collapse
 
ezinne_anne profile image
Ezinne Anne😎👩🏿‍💻

I love this article 👏🏿👏🏿👏🏿

Collapse
 
gaelgthomas profile image
Gaël Thomas • Edited

Glad you love it, @ezinne_anne! 😊🙏

Collapse
 
ebenjesussaves profile image
EbenJesusSaves

I like this one

Collapse
 
gaelgthomas profile image
Gaël Thomas

Thanks, @ebenjesussaves! Glad you like it 😄

Collapse
 
lippiece profile image
Alex

Bracket pair colorizer is deprecated, it's now a built-in feature.

Collapse
 
gaelgthomas profile image
Gaël Thomas

Yes, it is! 😊 As I mentioned in the article, it's no longer an extension, and I share how to enable the feature right inside the VSCode settings.

Collapse
 
msamgan profile image
Mohammed Samgan Khan

if u code in laravel.
here is one of the fine extenstion for pint, marketplace.visualstudio.com/items...

Collapse
 
mmueller profile image
Michael Müller

I found that VS Code lacks support for programming language aware diffs, so I created my own extension: SemanticDiff. It is obviously one of my favorite extensions, but maybe it is useful for some of you as well 😉️

Collapse
 
amyliumaiyi profile image
Amy Liu

Big fan of GitLens, thanks for sharing.