Extending Visual Studio Code

Developers like good code editors, and it’s not surprising that Visual Studio Code (aka VS Code) has become so popular so quickly. Go to any developer event and you’ll see Visual Studio Code up on the big screen, being used for live coding demos. With versions for MacOS, Linux, and Windows, it’s not surprising it’s had such a good response. You can pick it up on any developer PC and get started, knowing that you’re using the same tool with the same shortcuts and, most importantly, many of the same extensions.

The extension model is one of Visual Studio Code’s key features. There’s a huge library of extensions, adding language support, integrating with cloud services, or providing snippets of code to make your life easier. Microsoft’s VS Code Extensions API gives you access to various application endpoints, which can be accessed with your packaged JavaScript or TypeScript code, with data stored as JSON. Some features don’t even need code; they can be added using declarative methods. If you want to start building your own extensions, there’s plenty of sample code on GitHub to help you get started and a marketplace where you can share with other developers.

Inside VS Code’s extension model

Extensions are intended to target specific editor functions. One of the more popular options offers new themes to change the look and feel of the editing environment. Themes can change the way source code is displayed or the UI itself, theming both color and icons. Similarly Language Extensions use declarative techniques to support syntax highlighting, using the open TextMate grammar model. (If you’ve got a language grammar written for another editor that uses the same approach, it’s easy to bring it to VS Code.) VS Code’s language support includes tools for working with code snippets, and a way of defining how languages treat comments, how brackets and line terminations are handled, and how you can hide and display sections of code.

Working with code in a modern editor is more than formatting and pretty-printing (though of course they help make it more readable). We’ve all used IDEs such as Visual Studio and Eclipse, and we’ve become used to their more advanced features. Tools like machine learning-powered code completion and error checking are now part of our everyday workflow, so it’s not surprising that VS Code includes a framework for adding features like this to its editor, with a set of programmatic APIs. These let you define what happens when you hover a cursor over code, when you trigger a code completion, or when you launch a language-specific feature such as a refactoring tool.

By delivering a language server as part of a VS Code extension, you can quickly add static code analysis features and tie them to the various language APIs. Microsoft uses a similar set of APIs to those used by GitHub’s Atom editor, so you can use the same language server with more than one editor, making it easier to maintain language support. Related APIs link the editor to debugging tools and to runtimes, so you can compile and debug code, for example using .Net’s Roslyn compiler-as-service, or to use VS Code as a REPL (read-eval-print loop) for languages like Python.

A good programmer’s editor needs to be flexible, and that includes managing how the editor works with projects and filesystems. Microsoft calls this aspect of VS Code operations its Workbench and offers additional extension APIs that you can use to customize it. These let you add new features to its menus, and at the same time change how projects and files are displayed. You can even add your own content, using webviews to load HTML and CSS into the UI.

By making it relatively easy to build and add extensions to VS Code, Microsoft has encouraged support for languages that might not normally get mainstream support, and has allowed developers to add language-specific tooling, such as linters and snippet libraries. The result has been a vibrant marketplace full of extensions that are regularly updated, for the most part.

Customizing VS Code with extensions

I recently looked at the work Microsoft was doing to add Java support to VS Code, using a series of extensions wrapped up in a single pack, and it made me think about the extensions I use, and some of the more popular tools in the VS Code Marketplace.

One thing you won’t find in my install is any alternate themes. I’ve not seen the need for them, though I do know many developers who have chosen a different look and feel; especially those who present regularly and need a theme that works well on the big screen without making code hard to read.

Much of my personal load-out is tooling for working with sites and services I access regularly. One of the first things I install when I set up a new development PC is its Azure tooling. This brings together a selection of extensions for working with Azure and with common Azure services. It’s useful, as it manages all your account details and log-ins, as well as providing access to developer-focused Azure services such as Azure Functions and Cosmos DB, with support for the Azure CLI in VS Code’s integrated terminal.

That’s paired with Docker and GitHub extensions for working with open source code and for using containers on my development systems (especially my test PC that’s running 20H1 Windows builds with Windows Subsystem for Linux 2 (WSL 2) and with the preview release of Docker’s native Linux Windows containers support). These go hand in hand with the newly released remote development extensions that split editing, file systems access, and debugging across different systems, letting me work directly with code running in WSL from my desktop.

Other installed extensions add support for .Net Core C# applications, and for Google’s Flutter cross-platform application development platform, along with its Dart language. I’ve even downloaded a couple of tools that work with the new Chromium-powered Edge releases: a JavaScript debugger that hooks into its V8 JavaScript engine and one that works with the elements features of its F12 developer tool, rendering web content in a hosted browser control and using it to explore HTML, CSS, and JavaScript.

Some tools I’ve added are less code oriented. Although VS Code supports the markdown text formatting language out the box, I’ve installed a tool for previewing as if it were on GitHub, making it easier to work with and edit documentation. To wrap things up, I’m running a VS Code implementation of webhint (the recent renaming of the Sonar web linting tool) to help ensure any web content I edit is error free.

There’s a lot to like in VS Code’s extension support. It’s quick and easy to add language support, even for new languages such as Go and Rust, and there’s plenty of resources to help you build error-free code that’s tested and ready to share with the world.