10 VSCode extensions that will change your life

I think this is my first click baity title, really a more accurate title would be like “10 VSCode extensions I can’t live without” hmm even that’s a bit much, maybe like “10 VSCode extensions that I really dig and you may never have heard of”. Yeah, that works. On to le list!

Console Ninja

Console Ninja displays console.log output and runtime errors directly in your editor from your running browser or node application. It’s nice to see your console output right in your editor without having to switch to the browser.

You should follow Jack Herrington on YouTube btw.

CSS Var Complete

CSS Var Complete provides autocompletion intellisense for globally shared CSS variables and more. It’s super handy, you just type — and you will get a dropdown with all of your CSS variables.

Scratchpads

Scratchpads is a great way to store and keep notes of code snippets, it’s a super simple idea but I find myself using it all the time. Anytime I stumble across a cool CSS or JS snippet I pop open the scratchpad so I can reference it later.

Error Lens

Error Lens will highlight errors in your code and gives you immediate visual feedback of how mediocre of a programmer you are, all without leaving your editor! It’s a great way to catch errors before you run your code. It’s extremely flexible so you can make it as obtrusive or unobtrusive as you want.

Vim

I have to mention the Vim extension for VSCode, if I could only choose one extension it’d have to be this. Folks get all nerdy about Neovim and stuff but I find this extension to be pretty damn good. I have way too many years of vim muscle memory to give it up.

I know how to quit vim because i'm a goddamn vim pro but i mean i can't quit vim in like i can't not use at least vim keybindings in my code editor — I know you’re thinking this meme is meant to be another haha no one knows how to exit vim meme, but I know how to exit vim because i’m a goddamned seasoned vim vet but this meme is supposed to mean i can’t quit vim in like i can’t **not** use at least vim keybindings in my code editor, much like how jack wishes he could quit ennis because sometimes he feels like maybe life would be easier if he didn’t love him so much, that’s how i feel about vim, but one cannot choose who they love, it just happens, luv u vim ❤️

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense provides class name completion for Tailwind CSS classes in your markup. This was an absolute lifesaver when I first started learning Tailwind. If you’re new to Tailwind you can pretty much guesstimate the class name and then hit ctrl + space to see all of the options. I wasn’t going to put obvious intellisense stuff in this list but then this thing happened where I did.

Headwind

Headwind is a Tailwind CSS class sorter. It will sort your classes in the order that Tailwind recommends. It’s quite nice having your Tailwind classes automatically sorted on save, especially when your code starts looking like this:

<div
  className="w-full border rounded-md border-skin-lineh-16 text-white bg-black py-1 
  px-2 m-1 text-sm md:w-32 inline-block font-medium text-skin-accent 
  focus-visible:no-underline focus-visible:underline-offset-0 max-w-xs 
  text-justify accent-amber-600 hover:accent-gray-400 sm:max-w-none 
  md:max-w-none lg:max-w-none md:h-32 md:rounded-md md:text-base lg:w-48 
  lg:h-48 lg:rounded-lg lg:text-lg">
    lol i'm exaggerating but you know how it gets
</div>

This shit can get pretty chaotic but at least your classes will be in a consistent order.

Github Copilot

What can I say, Github Copilot is getting real good. I’ve been using it for about 6 months now and it’s hard to imagine coding without it. Don’t let it write code for you or replace your brain, instead let it do the busy work so you can focus on the important stuff. Don’t forget you are the pilot, learn how to utilize and stear it and it can be an incredibly powerful tool.

Better Comments

Better Comments allows you to sort of categorize your comments and colorize them.

You can also make your own custom comments and can control the color, background color, font weight, font style, etc. Here’s an example of how you can create a custom comment:

// in your VSCode settings.json:
"better-comments.tags": [
  {
    "tag": "#",
    "color": "#FFBE76",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false
  }
]

SVG

The SVG extension is a must if you work with svg’s a lot, you can preview, optimize, edit, and more. Just look at how easy it is to make your lil svg heart from a bold assertive red to an I don’t even know anymore transparent red:

Moonlight Theme

I’m not counting this as an extension but wanted to share my personal favorite theme. Moonlight (legacy version) is the best theme, I’ve tried a shit-ton of themes but always come back to this one. Also as you can probably tell the color schemes for this site were heavily inspired by this theme.

I tried to stick to the less obvious extensions, things like prettier, eslint, intellisense, etc are a given. What are you favorites? Let me know on twitter!