Someone once said, "at the center of every developer lies the heart of their favorite code editor". Ok, maybe that someone was me.. Just now. But seriously, if there is one thing most developers are passionate about, it's their dev environment!

Me, I'm a VSCode guy. I've been using it since it was in Beta and haven't found any reason to switch! One of my favorite features is extensions! It's so easy to add on new features and capabilities! Here is a list of my top picks and some of my favorite features!

Vetur

If you use Vue or Nuxt, then you HAVE to install Vetur. It enables Vue syntax highlighting, autocomplete, linting, formatting and much more!

Syntax Highlighting

If you use Vue or Nuxt, chances are you're using Single File Components (SFC). Many text editors don't know how to handle SFCs since they actually contain different types of content. Vetur solves this problem for Visual Studio Code and supports a wide variety of template, style, and script types. No more giant blocks of gray text!

IntelliSense

Every coder should have access to quality autocomplete. Vetur provides a wide variety phrases in all areas of your Vue files. After you start using them, you'll wonder how you ever got along without them.

Vue VSCode Snippets

These little snippets supercharge your workflow by creating boilerplate code just by using small shortcuts.

Some of my favorite shortcuts

vmodel - helps me create forms quickly

<input v-model="data" type="text" />

von - useful for reducing boilerplate text

@click="handler(arg, event)"

vdata - Sick of typing data() a million times? This is a great start!

data() {
  return {
    key: value
  }
},

vprops - Almost all of my components have props, this helps my sanity.

props: {
  propName: {
    type: Number,
    default:
  },
},

Auto Close Tag

As you might have figured out, this extension automatically completes your ending tags when using html. I love to use it with Vue and Nuxt!

Bracket Pair Colorizer 2

This extension is super helpful in finding where matching braces, brackets and parentheses are! It lets you color each in a variety of ways, even allowing you to change colors based on nesting!

This is my setup. It goes from normal gray to dark orange the deeper the nest.

"bracket-pair-colorizer-2.colors": [
  "#b0bac6",
  "gold",
  "orange",
  "#ff7700"
],

It may seem pretty simple, but it's actually really powerful (it's literally my favorite extension). Having different colors for braces, brackets and parentheses makes it super easy to spot the start and ends, which save you time!

Palenight Theme

This is my favorite theme for VSCode! It's easy on the eyes, well balanced, nothing too crazy and nothing too boring.

Gitlens

This extension is a Git powerhouse! It lets you navigate changes, see inline blames, compare branches, and even shows you the last commit of the current line! There are just too many features to list, you have to check it out for yourself!

Branch Compare

I have a habit of not commiting changes because it's just so darn easy to see the changes I've made in the Source Control tab. This is obviously risky, especially when I have to switch branches or pull down new changes!

GitLens has a great feature that lets you easily compare your current branch to main to see the differences between both. This is great because now you can commit like a champ and still have an easy way to your changes (to make sure your pull request is perfect!)

File History

Ever start updating a file in your project and spot something crazy? You want to find out who the heck did this ASAP!!? Gitlens has a File History section that shows you a list of changes to the current file. Clicking on any entry shows you the changes per commit!

These are my favorite VS Code extensions, without them I would be much less productive! What are your favorites? It would be great to discover new ones to help supercharge my workflow.