Turbocharging Visual Studio Code with Extensions

While Visual Studio Code (VS Code) is a fantastic multi-language editing platform, we often find ourselves wishing that it could do additional tasks. Wouldn’t it be great if we could view and edit GitHub tickets directly in VS Code? I would love to be able to edit MarkDown and create blog articles. If only I could connect to GitLab and see the latest status of my CI/CD pipeline. Wish no more! All these things and more are available as extensions to VS Code, and if there isn’t an extension already, you can write your own to fill that void.

In this short guide we’ll look at what VS Code extensions are, and then discuss:

  • VS Code in the Visual Studio Marketplace
  • Creating an extension
  • Publishing your extension

By the end, you will be able to find and add extensions to VS Code, and even create your own extensions and deploy them to the marketplace.

Technical requirements

Creating your own VS Code extensions requires the installation of Node.js and Git, as well as a small collection of node modules.

What are VS Code extensions?

Extensions in VS Code add functionality to the IDE that isn’t built-in. It can be something as small as a utility to insert a line of code to a full-blown debugger/code formatter/syntax highlighter (namely the C# for Visual Studio Code powered by OmniSharp extension, which provides a full C# compiler and debugging environment). The functionality you can provide with an extension is virtually limitless.

In VS Code, we manage extensions using the Extensions view. We can access it using the View | Extensions menu item, the Extensions icon on the sidebar, or the keyboard command Ctrl + Shift + X (Shift + Command + X on the Mac):

Figure 1 — Extensions view

This view lists all of the extensions currently in scope, as well as details about the extension in the right pane, and the installation status of the extension. There is a search box that allows you to find extensions as well.

To reload or not to reload

Some extensions can be applied in place, and some require the VS Code application to be reloaded. If a reload is required, a notification will be displayed in the Details pane. Simply click the Reload button and VS Code will take care of the rest.

There are four additional views available in the Extensions view:

  • The Installed view lists all of the currently-installed extensions. If there is an update for an installed extension, it will be annotated as such in the list.
  • The Recommended view shows all extensions that apply to tasks you have performed in the application. Say, for example, that you opened a MarkDown document in VS Code, then VS Code might suggest the Markdown or Markdown All in One extension to make the development of MarkDown documents easier.
  • Enabled and Disabled views are just that show which extensions you have installed and which are currently enabled or disabled, depending on the view you have selected.

Not that we know how to manage extensions in Visual Studio 2019 for Windows, let’s talk about Visual Studio Code.

VS Code in the Visual Studio Marketplace

Unlike Visual Studio 2019, VS Code always shows extensions from the Visual Studio Marketplace. Searching for extensions is much like using the Online window or Gallery tab in VS 2019. Type your search criteria in the search box, select an extension to view the details, and if you like it click Install.

Creating an extension

What happens when you search and search but you still can’t find the extension you want? Well, we are developers, after all, let’s just write our own! Everything we need to create an extension is available in a couple of npm packages all ready for us.

Generating a basic extension

Let’s create an extension that inserts a licensing header at the top of the open document:

  1. To get started, we will need to install the yo and generator_code npm packages. The yo package is a code scaffolder, which creates a basic project for us. The generator_code package contains the templates for the VS Code extensions. You can install them using the following command: npm install -g yo generator-code
  2. Once you have the required packages installed, we are ready to create our extension.
  3. Start the creation of our extension by running yo code. This will ask What type of extension do you want to create?:
Figure 2 — Yo Generator

4. Select New Extension (TypeScript)

5. Name your extension HeaderInserterVSCode

6. Leave the identifier blank to use the default value headerinsertervscode

7. Add a description, such as Insert a Code Header into the current document

8. Don’t initialize a git repository (or do, your call). Neither choice will affect the creation or operation of our extension.

9. Use the npm package manager.

10. When you finish making your selections, the extension generator should look like Figure 3:

Figure 3 — yo generator — Finished

11. Navigate to the headerinsertervscode directory.

12. Open VS Code (code .)

13. The generator created a large number of files for us, but the two we really need to be concerned with are package.json and src/extension.ts.

The package.json file defines our function name and contains the structure to tell VS Code what to do with our extension. On lines 2–4, you will see the information we put into the yo generator:

“name”: “headerinsertervscode”,
“displayName”: “HeaderInserterVSCode”,
“description”: “Insert a Code Header into the current document”,
“version”: “0.0.1”,

14. The other item of interest to us right now in this file is the commands section. This is where the command name and title are defined. If you search for the command, headerinsertervscode.helloWorld, you will see it is defined in the extension.ts file:

“contributes”: {
“commands”: [
{
“command”: “headerinsertervscode.helloWorld”,
“title”: “Hello World”
}
]
},

15. The extension.ts file contains the actual implementation code for our extension. The two things we need here are the activate function and the registerCommand call:

export function activate(context: vscode.ExtensionContext) {

let disposable = vscode.commands.registerCommand(‘headerinsertervscode.helloWorld’, () => {

vscode.window.showInformationMessage(‘Hello World from HeaderInserterVSCode!’);
});
context.subscriptions.push(disposable);
}

16. Activate is called when the extension is instantiated in VS Code. This is where we register commands and perform initialization actions.

17. The registerCommand call defines the method/actions that will be performed when the extension is called. In this case, we register the ‘headerinsertervscode.helloWorld command handler (remember this from the package.json file?) so the function is called.

18. Let’s see our extension in action! Press F5, which starts a new instance of VS Code with our extension running

19. Open the Command Palette using Ctrl + Shift + P (Shift + Command + P) and enter the command Hello World and press Enter:

Figure 4 — Hello World VS Code

Making our extension work for us!

Now that we know the extension works, let’s make it do what we want.

  1. First, let’s update src/extension.ts. We need to get a TextEditor so we can make changes to the text. Then we will use the editor, create a new insert position (line 0, character 0), and insert our text at that position. We will also change the name of the registered command from helloWorld to addCodeHeader. Replace your existing activate function with this function:

export function activate(context: vscode.ExtensionContext) {
const disposable = vscode.commands.registerCommand(‘headerinsertervscode.addCodeHeader’, () => {

// Get the active text editor
const editor = vscode.window.activeTextEditor;
if (editor) {
var header = “//\r\n// Copyright © Visual Studio 2019 Tips and Tricks. All rights reserved.\r\n// Licensed under the Creative Commons license. See LICENSE file in the project root for full license information.\r\n//\r\n\r\n”;

var insertPosition = new vscode.Position(0, 0);
editor.edit(editBuilder => {
editBuilder.insert(insertPosition, header);
});
}
});
context.subscriptions.push(disposable);
}

2. Now we need to edit the package.json. We need to make three changes here, in the activationEvents we need to change the onCommand action to point to our addCodeHeader registered action. We also need to change the command and title to be more in line with our function:

“activationEvents”: [
“onCommand:headerinsertervscode.addCodeHeader”
],
“main”: “./out/extension.js”,
“contributes”: {
“commands”: [
{
“command”: “headerinsertervscode.addCodeHeader”,
“title”: “Add Code Header”
}
]
},

3. Now if we run the code (F5), and Open the Command Pallette using Ctrl + Shift + P (Shift + Command + P) and enter the command Add Code Header and press Enter our extension will add a header at the top of the currently open document.

Editing selections

If we want to interact with text that is already there or is a selection, we can use the TextEditor object we created earlier:

const document = editor.document;
const selection = editor.selection;
const word = document.getText(selection);
editor.edit(editBuilder => { editBuilder.replace(selection, replacement);

Now that we have a fully functional, useful extension, we should share it with the world! Let’s talk about publishing it to the marketplace.

Publishing your extension

Once you have your extension polished and ready to share, you need to push it to the marketplace. We will use vsce for this. Short for Visual Studio Code Extensions, vsce is a command-line tool for packaging, publishing, and managing VS Code extensions.

Just like before, we will use npm to install the vsce package:

npm install -g vsce

Once it’s installed, we can use it to package and publish our extensions directly to the marketplace. To create a vsix package, we just need to move into the directory, run the package, and then publish:

  1. Navigate to the headerinsertervscode directory.
  2. Run vsce package. This will generate the headerinsertervscode.vsix file
  3. Next, we run vsce publish and our extension goes to market!

We can also use vsce to search, retrieve metadata, and unpublish extensions. The vsce — help command will list all of the options available from the tool.

Prerequisites for publishing

Before you can publish, you will need to create a Personal Access Token and a Publisher. More information on this process is available from: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions.

Summary

In this guide, we’ve discussed what Visual Studio Code extensions are, and have seen how to locate and install them from the Visual Studio Marketplace. You’ve learned how to create extensions by making an extension to put a licensing header at the top of a code file, and you’ve seen how to create a vsix file to share your extension and deploy it to the marketplace. Hopefully, armed with this knowledge, you now feel inspired to try your hand at creating many more extensions and will become a more productive Visual Studio coder as a result.

Buy Visual Studio 2019 Tricks and Techniques:http://packt.live/3rcgZ3k

We help developers build better software | Email customercare@packtpub.com for support | Twitter support 9-5 Mon-Fri

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store