Common VSCode Extensions

Ever since MMS2019 – I’ve been asked and have seen numerous questions about what VSCode extensions should someone get started with. While everyone needs different things here are a few extensions I think anyone working in PowerShell should use.

NOTE: If you want to skip to the full list of my favorite extensions just scroll to the section called “Favorite Language Agnostic Extensions”

What are extensions

To get started a quick review of extensions is in order. Extensions for VSCode allow you to customize your code editor. I’m being picky about word choice here not calling this our “workspace” – because workspaces are another subject for another time. Extensions are designed to make your life when coding easier. If you’ve been working in PowerShell ISE you may have even been exposed to some in the past. These extensions can be anything and everything from changing the color of your editor, spellcheck, notes, and more. If you want to get a deeper understanding of what exactly extensions are and understand how extensions are written take a look at the Visual Studio API documentation linked below.

https://code.visualstudio.com/api

Installing VSCode Extensions

Fortunately, installing VSCode Extensions is really simple. You have a few different options to get started. Option one is you can visit the marketplace on the web and install extensions directly from the page. Option two is to simply search for and install extensions from VSCode directly. To get started with the market place simply visit it at:

https://marketplace.visualstudio.com/vscode

If you don’t want to use the web-browser thats fine too. In the charms bar (That’s on the left hand side of the GUI) select the extensions option. (It looks like the Microsoft “Apps” icon in all of the modern tools).

Clicking this will open a search dialogue in the explorer view pane on the left hand side. Just click in the top left corner and type in the name of the extension you would like to find. Then select the extension, and click install. Done.

Favorite Language Agnostic Extensions

I divide extensions up into two buckets. Language based extensions, and language agnostic extensions. Language Agnostic Extensions deal specifically with editor quality of life. I will list my favorites and then provide some short notes about each one below.

  • Bracket Pair Colorizer
  • TODO Tree
  • GitLens
  • Settings Sync
  • Compareit
  • VSCode-Icons

Bracket Pair Colorizer

Have you ever run some code and been yelled at that you’re missing a closing bracket? What about a parenthesis? Say goodbye to wasting your time searching for the other half with Bracket Pair colorizer. This extensions uses pretty colors to match the different potential braces you might use. I cannot say enough good things about this extension and how much time it has saved me. You can customize the colors if you read into the settings.json in VSCode.

TODO Tree

If you are tired of staring at your code and wondering why it doesn’t work this is the extension for you. TODO tree lets you create custom tags and comments so you can track the areas in your code you need to come back to later. It lets you track items you’ve fixed and the items that maybe need some more coffee applied to them later on at night. This one is a little tricky to get set up and working and I’ll do a follow up blog post on how to get this configured next week.

GitLens

Who was it that broke this code??? – This is the tool for you. If you are really getting into DevOps at some point you are going to end up working as part of a team. This means at some point, someone will commit code that “worked on my machine”.

Settings Sync

At some point you will spend hours getting your settings exactly the way you want them. The exact color combination, the exact extensions installed. Then once you’re done, you’ll have to login to some other computer and you’ll be missing all of your settings. Once you have screamed in frustration and rage over missing all of your cool stuff. Don’t panic just use Settings Sync to download all of your settings back from your private GIST repository on GitHub. This extension is a little more complicated to set up and also requires a little more in depth explanation. The moral of the story is, it will save you TIME not having to re-install all your extensions manually, or re-create your user snippets.

Compareit

Ever try to find the difference between too files when source control isn’t involved? Yeah so have I it sucks. Compareit will look at files line by line to evaluate what is and isn’t different between two files. It’s neat and has some nice niche uses.

VSCode-Icons

This one is pretty self explanatory. It’s an icon pack for the editor that allows you to actually understand the file type you currently have open. Its just better looking than the default.

Whats next

There are a TON of fantastic extensions out there and I can’t possibly cover all of them. There are extensions for Azure Repos, Docker and more. However, I think these are a good starting point for someone just getting started. What about you, are there any you’re using that I’m missing from this? Let me know in the comments down below and I’ll get them added.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: