DEV Community

Cover image for If We Only Had Five VS Code Extensions
Dennis Persson
Dennis Persson

Posted on • Originally published at perssondennis.com

If We Only Had Five VS Code Extensions

If you had to choose five and only five VS Code extensions, which would you choose?

I asked that question to myself, and I have picked out the five best extensions I would recommend for general web programming.

Git Graph

I have always been promoting to learn Git through the terminal to understand the reasoning behind it and to be able to help people solving their Git issues even if they don't have a Git GUI you are familiar with.

Despite that, I think Git Graph is priceless when it comes to getting an overview of the Git History, the current Git state and to quickly see what has been included in each commit. To quickly performing cherry-picks, merges, reverts, commit undo and checkouts is a of course also extremely handy.

Git Graph VS Code extension

Git Graph extension on VS Code Marketplace

Auto Hide

Auto Hide is a VS Code extension that automatically closes the sidebar and optionally terminal in VS Code when you focus the text editor. Simple as that, but I love it. You do of course have the shortcuts cmd/ctrl + b and cmd/ctrl + j to do the same. But to constantly doing that really annoys me.

For private programming, I mainly use a laptop, but even when using three screens at work with IntelliJ based IDEs like WebStorm and Android Studio minimizing sidebars and terminals is an absolute must for me.

Regardless if you use the extension or not, I will give you the life hack to move the VS Code sidebar to the right side of the screen under View > Appearance menu in VS Code. By doing that, your text editor will not shift horizontally when opening and hiding the sidebar.

Auto Hide VS Code extension

Auto Hide extension on VS Code Marketplace

Peacock

Maybe I am some sort of aesthetics freak, but I like to keep things stylish and organized. With Peacock extension you can put some color on your VS Code windows. Really nice for me who always works with at least three different repositories or projects and rarely close my workspaces on the Mac (yes, a style snob would maybe be the correct term).

By just adding some colors to each window, you can now instantly see which project you currently have on the screen in front of you!

Peacock VS Code extension

Peacock extension on VS Code Marketplace

ESLint

An obvious option. I would actually almost refuse to work with someone who didn't want to use it. It's a standard and should be used for both linting and prettifying. If you are new to programming and unsure what it is, please read about it and start using it.

ESLint extension on VS Code Marketplace

Package Json Upgrade

Package Json Upgrade have one job, and it does it great. It keeps track of which of all dependencies in package.json file that is up to date.

With a single repository, it's maybe easy to keep it up to date and also have a grasp of the latest releases of the packages. With multiple projects and lots of different dependencies Package Json Upgrade will soon become your best coding buddy reminding you about available upgrades and thereby important security fixes and technical debts.

Package Json Upgrade VS Code extension

Package Json Upgrade extension on VS Code Marketplace

What Is the Best VS Code Extension?

Make your choice in the comments. List your five best VS code extensions you could not live without.

Top comments (28)

Collapse
 
baenencalin profile image
Calin Baenen

Clearly this list list was made for JavaScript people.
Clearly Rust-Analyzer would have been a better pick over ESLint.
    /satire

Collapse
 
zalithka profile image
Andre Greeff

against my better judgement, I'm going to poke the proverbial bear and beg to disagree with you on, well, the whole list... and for context: I use VSCode daily for multiple different web-related projects, including JS, TS, Dart, sometimes even a little Java.


Git Graph? nah, you're much better off with a decent quality dedicated Git GUI... the official Git website has a long list with a little something for everyone. "Fork" is absolutely brilliant if you can justify the license cost (and don't use Linux), "GittyUp" is my next best option.

Auto Hide? it's great in principle, but have you actually tried to use it? like, regularly?? I did.. then I spent days trying to hack it into submission.. it relies on the same actions that mouse or keyboard interactions use, which also change focus. so, this would be a solid no. (FWIW, I believe there are ideas for APIs that will improve this, but I haven't followed up on that for quite a while)

Peacock? and negate all those many hours we've spent looking for that "perfect dark theme"? hmmm.. I don't know anybody personally that would do that.

ESLint? sure you could install this in your main profile and have it always available.. or you could just add it to the extension list for whatever dev container actually requires it.

Package Json Upgrade? yeah, I used to use this.. really like the way it lets one pick the update to do, between "major", "minor" or "patch" (as applicable). but overall I would say Version Lens is better, since it supports numerous project types in addition to Node.


yeah, so since the entire premise of this argument is personal preference, my personal top 5, for web dev and more:

  • Better Comments, because the colours mean you will never unwittingly scroll past a TODO or FIXME comment again.
  • Code Spell Checker, because who doesn't love a good camelCaseFriendlySpellChecker? (:
  • Gremlins Tracker, because these little suckers can and do cause utterly ridiculous problems in all languages..
  • Formatting Toggle, because we all know that "special someone" who downright refuses to format his/her code.. and bitches when your auto formatting changes everything that they did.. this is the high road. take it, move on with life.
  • Dev Containers, because once you go full container, you'll never want to go back.
Collapse
 
padcom profile image
Matthias Hryniszak

I completely agree with pretty much everything you wrote although I'd say the described extensions are more eye candy for those who need to stimulate them selves visually rather than increase productivity. ESLint is probably the only one I'd agree with to the point that it can be always installed but each project needs to have its own config that makes sense. And don't even get me started on prettier....

Collapse
 
syeo66 profile image
Red Ochsenbein (he/him)

"No VS Code extensions needed" - neovim user😅

Collapse
 
katafrakt profile image
Paweł Świątkowski

There's really only one extension needed:
github.com/hoovercj/vscode-power-mode

Collapse
 
debojyotichatterjee9 profile image
Debojyoti Chatterjee

It would be a little distracting tbh! Looks cool though

Collapse
 
katafrakt profile image
Paweł Świątkowski

yeah, only turn it on when you are screen sharing ;)

Collapse
 
padcom profile image
Matthias Hryniszak

Eye candy.. It's not only distracting but hurts productivity. Yeah... nice if you need to emphasize something during a presentation, like one or two lines of code that really rock - strongly harmful otherwise.

Collapse
 
schemetastic profile image
Rodrigo Isaias Calix

Peacock seems very interesting, haha, I just currently use a theme that I like (Dark Orange).

For me, one of my faves would be Vite along with the Browse Lite extension (that if I'm not wrong automatically installs it when you install Vite), a Vite powered app starts as soon as I open VS Code and then automatically opens the app in the integrated browser, and when I make changes, the hot reloading let me see the changes almost immediately.

Collapse
 
jeannitonmnr profile image
Monero Jeanniton

Peacockis exactly what I was looking for.

I use different colors to differentiate the window of my App and its API.

Thank you

Collapse
 
theplenkov profile image
Petr Plenkov

1 - Gitlense ( cannot imagine now work without it )
2 - Prettier
3 - Nx (improves Nx.dev experience for JS monorepos )
4 - Docker (helps to access Docker and compose images from IDE)
5 - Dev containers ( game changer in terms of VS Code experience )

Collapse
 
g33knoob profile image
G33kNoob

When gou upgrade your package.json you have 1 job check the availability api usage, for me better check the changelog before update anything

Collapse
 
ekqt profile image
Hector Sosa

All of these are just gems! Great share! If you want to make your content stand out. Try framing your screenshots here and there.

We've built an OSS tool to help with this. Check it out and let me know know what you think: useScreenshot.app/GitHub. I'd appreciate giving it a star on GitHub if you find it useful! Cheers!

Collapse
 
vifeng profile image
vifeng

marketplace.visualstudio.com/items...
Inline parameters... Can't live without it

Collapse
 
drumstix42 profile image
Mark

Pretty neat. FWIW- VSCode does have a setting for this that comes standard, but it's much more conditional and limited than this extension.

I will definitely check this out, thanks for sharing!

Collapse
 
bhanu1776 profile image
Bhanu Sunka

I think you should give a try to jellyfish-x-retro vscode theme.. I'm sure you gonnna love it! 😉

Collapse
 
michaelhipp profile image
Michael Hipp

Vim extension.

Collapse
 
thebuildguy profile image
Tulsi Prasad

Thanks for the list! I didn't knew about package-json-upgrade, it'll be a game changer! 🔥

Collapse
 
manuelsayago15 profile image
Manuel Sayago

I think I got used to ESLint, definitely! At first I got upset, hahaha. But it's a really nice tool, thanks for mention it.

Collapse
 
tracygjg profile image
Tracy Gilmore

Hi Dennis, Nice selection of extensions. Sorry, but I spotted a typo. I think it should be "Package Json Upgrade has one job...".
Kind regards, Tracy