Cool VSCode Plugins

Earlier today over on the Frontend Horse Discord, there was a super interesting discussion on how different folks take notes and what tools they use.

Obsidian and VSCode were compared for their Markdown authoring abilities and the advantage seemed to be leaning towards Obsidian as it allows for things such as pasting URLs over selected text.

I derailed this thoughtful, interesting discussion by being all “hurr durr my VSCode does that durr” and sharing this video:

Of course I quickly realized that this is not because I’m special, it is because of the other awesome developers helping to make great tools even greater: plugins.

Productivity

Markdown All in One

This is the one that I was referring to in that intro and let me tell you, I’ve had this plugin installed for so long that I actually forgot that it wasn’t baked into VSCode.

Markdown All in One by Yu Zhang handles basically everything you’d expect to enhance your Markdown authoring needs.

• Link pasting
• Table of Contents
• Table Formatting
• Autocomplete paths
• Enhanced keyboard shortcuts
• A bunch more things

One caveat, as Mayank pointed out in our discussion - this does not automatically handle .mdx filetypes, however it can be added by associating the filetype to markdown files in VSCode settings.

• Press ctrl / cmd + , to open VSCode settings
• Search for files.associations
• Click Add Item and include .mdx as markdown

If you do any sort of editing of Markdown files, I totally recommend checking this out.

Better Comments

I like Better Comments by Aaron Bond as it helps me easily find places in a file that I may need to revisit, such as: todos, questionable code, or alerts about specific things.

This works by just including certain annotations in your comment such as:

• // ! Alerts
• // ? Queries
• // TODO: Todos

Each end up highlighted differently from other comments.

I like this too as it leads to a nice convention for writing comments, plus it makes searching projects for todo items easier.

Peacock

This is one that might take a little more effort to set up, and I expect few to give it the chance, but Peacock by John Papa helps you change the color of VSCode per workspace.

I don’t know if you are all as weird as I am, but I like to make things different colors. It’s like 90% of why I’m a web developer for Pete’s sake!

That being said, this is also super helpful if, also like me, you typically have many different projects open at a time. That can get confusing since all the windows look the same at quick glance. I usually set the color to a brand color or a darker type color from the projects theme, that way it helps clue me in on which project is which.

GitLens

GitLens by GitKraken is awesome to me for one reason and one reason only: inline blame.

Don’t get me wrong, I’m not the type of person to go after someone over bad code (spoiler, it’s me - I’m the bad code), but it can be helpful while debugging to know when changes were made, directly in your editor.

Now, does GitLens have other features: probably. I don’t know and I don’t care, this one thing is all I need it for.

Fun

Stream Deck for VS Code

If you have a Stream Deck, you can make it do stuff in VSCode with Stream Deck for Visual Studio Code by Nicollas R!

Basically it helps you by setting up Stream Deck buttons to run commands, shortcuts, and other things within VSCode.

I wired it up with all the usual node project suspects: npm install, npm start, npm run dont-walk-to-our-summer-savings-sales-event

VSCode Pets

This is the best plugin on this list, VSCode Pets by Anthony Shaw.

You get cats, dogs, snakes, Clippy for some reason, birds, and a few other options for furry friends.

I set up VSCode Pets to represent my real pets, which are the animals who live inside my house.