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!
If you use Vue or Nuxt, then you HAVE to install Vetur. It enables Vue syntax highlighting, autocomplete, linting, formatting and much more!
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!
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.
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
vdata - Sick of typing data() a million times? This is a great start!
vprops - Almost all of my components have props, this helps my sanity.
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!
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.
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!
This is my favorite theme for VSCode! It's easy on the eyes, well balanced, nothing too crazy and nothing too boring.
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!
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!)
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.