Graham Watts

(he/him) IT geek - DevOps Engineer - Rescue dog and cat dad - Sometime runner and cyclist.

Visual Studio Code (VS Code) is a free, open source, cross-platform code editor developed by Microsoft. It is available for Windows, macOS, and Linux. It’s also extensible, so you can add whatever functionality you need for your specific use cases. This makes it a great tool for a wide range of people working in IT; from the obvious software developers, to DevOps engineers like myself, to those working in technical support and even system administration.

What strikes me though, having worked with a wide range of engineers is that while many have heard of VS Code, and have it downloaded and installed, even using it daily, they often miss the power of the tool. I’ve seen many who simply use it in it’s default configuration as a text editor similar to Notepad or Notepad++. While this is fine for some, and there is no criticism here for doing so, it’s a shame to miss out on the power of the tool. Often I see engineers struggling to achieve things that a simple extension would help them do in a few seconds.

So what I’d like to do in this post is highlight some of the features available in VS Code, and some of the extensions I frequently use and that I think you might benefit from too.. Hopefully by doing so I can set you on the path to unlocking the power of VS Code.

Getting Started

First off, I won’t try and teach you everything about VS Code in this post. There are plenty of resources out there to help you get started. I’d recommend the following as a starter for 10:

Features

Some of the features I really like and use often in VS Code are:

So, in no particular order let’s explore VS Code and how you can start to get the most out of it for your use cases.

Back to top

Command Palette

Before getting into specific features and I functions you absolutely have to be familiar with the Command Palette. Accessed using Ctrl+Shift+P on Windows and Linux and Cmd+Shift+P on MacOS, this tool is your access to the thousands of commands and options made available by VS Code and your installed extensions.

Open the command palette and then start typing what you would like to do, it will start to filter options as you type. For example View: Toggle Terminal will show/hide the integrated terminal.

As you get started with VS Code start to explore this really handy tool and unlock all those features and functions you didn’t know existed… I’m still finding new things in here almost every day!

Back to top

Integrated Terminal

This is one I missed myself at first and I see a lot of engineers make the same mistake I once did.

To start with, you can find the documentation here: https://code.visualstudio.com/docs/terminal/basics

Put simply I used to, and I see engineers everyday, do some work in VS Code writing whatever code they are working on, and then in separate terminal window run their code. Now there is nothing inherently wrong with this, but it does mean that you’re constantly application/context switching between your code and runtime. If you’ve got multiple monitors, OK great it can work, but if you’re working from a single screen then you’re missing out.

Instead you can open a terminal directly in VS Code! You can lay the terminal alongside, or below, you code and then jump between making a change and running it all in the one window! I do this all the time when I’m working on this website where I will be running the bundle exec jekyll serve command in a VS Code terminal and then as I make changes I can see jekyll process them and catch any errors early etc. No need to jump windows, just see and fix the error. It’s a small win, but they all add up.

Also, if you’re not using an enhanced terminal such as Windows Terminal for Windows or iTerm for MacOS then, chances are, you’re missing useful features like multiple panes and maybe even tabs. As you can tell by me linking them, I do think you should enhance your terminal game too, but you can skip that and just have multiple tabs and panes directly in the VS Code terminal! Cool right?

Maybe you have multiple shells installed, such as you’re a Windows user but have WSL installed? VS Code gives you access to them all so you can have a PowerShell and Ubuntu bash shell running right next to each other.

Check out the docs and go explore, this is one of my go to tips and I use it all the time, more often than my actual terminal application(s).

Back to top

Integrated Web Browser

This is another one I missed until recently! If you’re doing web development then you’re probably used to switching between your code and browser in a very similar way to those terminal users I talked about?

What if I told you that you don’t have to? You can have a browser running natively in a VS code tab! Maybe you lay that view as a 50/50 split with your code so you can see changes as you make them… The power is yours!

This is yet another built-in feature with VS Code! Simply open the command palette and search for simple browser. A browser will now launch in a new tab and allow you to point the URL to wherever you need/want. Could also be useful for documentation too!

Or, if you’re doing more there is the Live Server which will build your local web app to a locally running server and even hot reload on file save. But this will launch a new browser instance for your default browser… doesn’t stop you pointing the simple browser back to the same endpoint though…

Back to top

Native Git Integration

Really VS Code has built-in source control handling, but it ships with the git client already installed. With git being the most ubiquitous source control tool in use today this means that you’re ready to go as soon as you open VS Code, even against existing git repos on your machine.

Full documentation is here: https://code.visualstudio.com/docs/sourcecontrol/overview

Several Web hosted git solutions such as GitHub and Bitbucket have integrations where you can clone a web hosted repo directly into VS Code and jump straight to working in one go.

However you get your repo started you can visually see and interact with all the elements or working with you git repo such as moving code between your working and staging areas with git add and committing code to the repo with git commit, there’s even a nice text box for your commit messages. If any of this is alien to you maybe check out my git 101 primer blog post where I go over this for you? If you’re just starting out with git being able to see the “behind the scenes” as you step through commands can be a really helpful learning tool.

If git isn’t your thing and the project(s) you’re working on use svn, or mercurial, or something else then you can find extensions in the marketplace which will extend the same source control tools to work with your source control of choice, neat huh?

Back to top

Extensions

OK! I’ve mentioned them a few times already; let’s get into the true powerhouse behind VS Code! Extensions allow you to “extend” the functionality available in VS Code to whatever you need to do. Maybe you are a go developer and want syntax highlighting for go-lang, or you’re a DevOps Engineer working with Ansible and need tools for making working with YAML easier, or maybe like me right now you do a lot of documentation work in Markdown and would like tools to help you write cleaner documentation and automatically add tables of contents? Pretty much whatever you need, there’s an extension for it!

Want the docs? They are here for you: https://code.visualstudio.com/docs/editor/extension-marketplace

Navigate to the Extensions tab and start searching the marketplace!

Back to top

Some of my Extensions

I’ve had some people ask what extensions I use; so I thought I’d capture some of them here. I use a lot as a bounce between many different projects so take this as some “recommendations” from me rather than an extensive list.

Back to top

Extension Packs

Extension packs allow you to install a collection of extensions at once. I use a few of these to get a good base set of tools for my work. They’re put together either by fellow developers or sometimes by Microsoft (or other similar vendors) themselves. They’re a handy way for me to recommend to you a bunch of extensions and have you install them all at once.

Search for extension pack in the marketplace to see that else might work for you.

  • Git Extension Pack
    • A collection of extensions for working with git, including:
      • Git History
        • Visually see git history, similar to git log
      • Project Manager
        • Helps with managing multiple projects
        • One I do use less if I’m honest, but it comes along for the ride
      • GitLens
        • Inline git blame, and other git tools
      • gitignore
        • Helps with managing .gitignore files for specific languages
      • Open in GitHub / Bitbucket / VisualStudio.com
        • Jump straight to the file and line in your online repo
  • Python Extension Pack
    • A collection of extensions for working with Python, including:
      • autoDocString - Python Docstring Generator
        • Generate docstrings for your Python functions
      • Python
        • The Python language support from Microsoft including Intellisense
      • Jinja
        • Support for Jinja2 templates
      • Django
        • Syntax and snippets for Django
      • Intellicode
        • AI-assisted coding
      • Python Indent
        • Auto indent your Python code
      • Python Environment Manager
        • Manage your Python environments
  • BASH Extension Pack
    • This one is not well documented so some may feel less comfortable but I’ve found it installs some useful tools including
      • Bash IDE
        • Syntax highlighting and snippets for Bash
      • Bash Debug
        • Debug Bash scripts
      • Shebang Snippets
        • Snippets for Bash shebangs for different types of scripts
      • shellman
        • Snippets for shell scripts
  • Remote Development
    • Tools for connecting your local instance of VS Code to remote machines
      • Windows Subsystem for Linux (WSL)
      • Dev Containers
      • SSH Remote Machines
    • Allows you to work from the comfort of your local machine but still have access to the power of remote machines and containers
    • I use this extension a lot when building this site as my test environment is Jekyll installed and running on Ubuntu in WSL2

Back to top

I’ve also got a few extensions which I use regularly which I’d recommend to you. I’ve not included them in the extension packs above as they’re not necessarily “Python” or “Git” extensions, but they’re ones I use a lot.

  • Ansible
    • Syntax highlighting and snippets for Ansible
    • Essential for DevOps Engineers!
  • Bash Beautify
    • Auto format your Bash scripts
  • Code Spell Check
    • Spell check your code
  • Docker
    • Tools for working with Docker containers and images
  • GitHub Copilot
    • OK, so this one does have a cost associated with it (currently around $100 per year for an individual developer)
    • It’s also a bit controversial as it’s AI-assisted coding and there’s a lot of debate about whether it’s a good thing or not and if it sourcing code without due respect for licences from other open source projects
    • All of that said, I find it great for getting ideas and inspiration for code and it’s a great way to learn new things
    • It can, and does help you generate code quicker; BUT it’s not a replacement for learning how to code as you really need to be able to differentiate good code from bad code and understand what’s going on
    • I use it a lot, but I also test the code it generates to make sure it’s good before I use it, and research the code it generates to make sure I understand what’s going on
  • GitHub Pull Requests and Issues
    • Tools for working with GitHub PRs and Issues
    • Funnily enough, where I host my code on GitHub I use this one a lot
  • Kubernetes
    • Tools for working with Kubernetes
    • Essentials for DevOps engineers!
  • Markdown All in One
    • A collection of tools for working with Markdown
    • Essential for writing documentation, or working with Jekyll for this site!
  • Peacock
    • Adds a change of colour to the workspace bar to help you identify different workspaces
    • Alternatively you can try Window Colors to do much the same thing. I’ve used both and like both, so take your pick.
  • Prettier
    • Auto format your code
    • Like Bash Beautify, but for a lot more languages
  • Trailing Spaces
    • Removes trailing spaces from your code
    • Absolute pet annoyance of mine leaving extra spaces at the end of lines or in blank lines in your code, so this one is another heavy use for me.
  • YAML
    • Language support for YAML files
    • Another vital one for DevOps engineers!

That’s a fair list from me, but like I said it’s not all inclusive. For example I have a wide range of extensions for AWS and Azure tooling, but that’s workload specific. Similarly I have just added the Terraform extension to my list as I’m starting to use it more and more. If you do a lot with Windows maybe the PowerShell extension is for you, it’s another one I have.

There’s also options for notebooks such as Jupyter or the Polyglot Notebooks extension which allows you to mix and match languages in a single notebook. So if you like inline code and output in your documentation, there’s options for that too.

Back to top

Settings Sync

Settings Sync is something I use a lot! I switch between a few different machines between personal Windows and Linux machines and a work Mac, so having my settings follow me is really useful. We’ve not talk about the Insiders program for VS Code but there’s an option currently in preview there to have not just settings but live changes sync between machines, maybe by the time you read this it’ll be live in the main line release.

You’ll find Settings Sync under the ⚙️ (gear/cog) icon.

Docs for Settings Sync are here: https://code.visualstudio.com/docs/editor/settings-sync#_turning-on-settings-sync

Mostly it’s a set and forget thing in my experience but the key component here is using either a Microsoft account or GitHub account as the sync account. Choose Settings Sync from the gear icon, enter your credentials and away you go. Even if you only use a single machine it’s worth setting up so that if/when you get a new machine or reinstall VS Code (whatever) then you’re settings are still with you.

Back to top

Customisability

Here is where you make VS Code your own!

Much of the customisability is in the extensions that we’ve already discussed where you can VS Code syntax highlight, lint, and even code suggest whichever language(s) you want. There is, however, much more you can configure. For example, if you’re a fan of vim and it’s key bindings, there’s an extension to configure VS Code to use keys, motions, and shortcuts. Or maybe you are like me and like the Solarized Dark theme, you can configure the theme you want to use and download more from the marketplace if you can’t find a default one you like.

You can try out different themes by pressing Ctrl + K Ctrl + T and see the out of box list. Do you see the light? Or do you live in the dark because light attracts the bugs? Find a theme that fits your preferences.

Is there a command from the command palette that you always use? Set your own key binding or find a key binding extension such as vim for a preconfigured setup.

Lastly, if you’re curious or can’t find the setting you want to change you can open the Settings editor with Ctrl + , or Preferences: Open Settings (JSON) from the command palette to either use the UI editor or directly modify settings in the JSON file where all your settings are held. Don’t forget to make sure you’re syncing this with Settings Sync!

Back to top

Wrapping Up

There you go, a overview of some of the key and common ways to tailor VS Code to the tool you need it to be. It’s not exhaustive so do checkout the docs and go exploring to see what else you can tweak, and make VS Code yours!

Enjoy and happy coding!

If this article helped inspire you please consider sharing this article with your friends and colleagues, or let me know via LinkedIn or X / Twitter. If you have any ideas for further content you might like to see please let me know too.

Back to top

Updated:

You May Also Enjoy

Troubleshooting Skills

25 minute read

Looking at the art, and the science, of troubleshooting technical issues