Creating Extensions for Visual Studio Code: A Complete Guide
Tags: webdev, productivity, extensions
Published: 2020-07-02 12:10:11

---
title: Creating Extensions for Visual Studio Code: A Complete Guide
published: true
date: 2020-07-02 11:30:16 UTC
tags: webdev, productivity, extensions
canonical_url: https://www.syncfusion.com/blogs/post/creating-extensions-for-visual-studio-code-a-complete-guide.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Creating-Extensions-for-Visual-Studio-Code-A-Complete-Guide.jpg
---

Extensions are an indispensable part of project development. They play a vital role in improving your productivity on a project, helping you customize your project, and more. [Visual Studio Code extensions](https://code.visualstudio.com/api) are add-ons that enhance your productivity and allow you to customize your project by adding new features or integrating existing tools into it. These extensions can customize existing or new projects by adding files, new palettes, menus, commands, and so on.

This post explains how to create a Visual Studio Code extension that creates a new project palette.

Let’s get started!

## Prerequisites

- [Visual Studio Code](https://code.visualstudio.com/download)
- [.NET Core 3.1 SDK](https://dotnet.microsoft.com/download/dotnet-core/3.1)
- [C# Extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp)
- [Node.js](https://nodejs.org/en/)

## Create a VSIX project

Follow these steps to create a VSIX project:

**Step 1:** Create a new **VSIX project** in Visual Studio Code through **Terminal** > **New Terminal**.  
  
**Step 2:** Run the following command to install the Code Generator:

| `npm install -g yo generator-code` |

Now the extension is ready for use with a TypeScript or JavaScript project.

**Step 3:** Run the following generator command and wait for some time (approximately 5 minutes) for the extension generator to be loaded.

| `yo code` |

**Step 4:** Fill out all the fields for a TypeScript project as illustrated in the following screenshot.

![Fill out all the fields for a TypeScript project](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Fill-out-all-the-fields-for-a-TypeScript-project-1.png)  
The extension project has been created successfully.

**Step 5:** Open the project by executing the following command:

| `cd Mycode //The Mycode is an extension identifier name.
code .
` |

The project will be shown in the **Explorer** window as in the following screenshot.  
 ![Project shown in the Explorer window](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Project-shown-in-the-Explorer-window.png)

## Update the extension details

The package.json file has the VS Code extension name, description, author, license, and other details. Open the **package.json** file to edit the extension details as shown in the following screenshot.  
 ![Open the package.json file to edit the extension details](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Open-the-package.json-file-to-edit-the-extension-details-1.png)

## Create a Visual Studio Code project template

We can create a project template for any project type available in the **dotnet new** command. Here, I am going to create a new **Blazor** project for demonstration purposes.

**Step 1:** Create a new folder in the following structure.

**{VSIX Project Location}/templates/BlazorServer**

**Step 2:** Open the **Terminal** ( **Terminal** > **New Terminal** ) and navigate to the BlazorServer location using **cd command.**

Step 3: Run the following command to create the Blazor server app.

| `dotnet new blazorserver` |

The following screenshot shows the output on running the command.  
 ![output](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/output.png)

### Launch configuration

When running or debugging a simple app in VS Code, creating a [launch configuration](https://code.visualstudio.com/docs/cpp/launch-json-reference) file is beneficial because it allows you to configure and save debugging setup details. VS Code keeps the debugging configuration information in the **launch.json** file located in the **.vscode** folder in your workspace (project root folder).

Follow this procedure to create a launch configuration file:

**Step 1** : Create a **launch.json** file for the template project. To do this, open the new Visual Studio Code instance and open the created Blazor server application  
( **{VSIX Project Location}/templates/BlazorServer** ).  
**Step 2:** Go to **Run** > **Start Debugging** and select the **.NET Core** environment like in the following screenshot.

![select the .NET Core environment](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/select-the-.NET-Core-environment.png) **Step 3:** Click the **Add Configuration** button to add the **Debug** configuration.  
**Step 4:** Choose the **.NET: Launch a local .NET Core Web App** option as shown in the following screenshot.

![Choose the .NET: Launch a local .NET Core Web App option](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Choose-the-.NET-Launch-a-local-.NET-Core-Web-App-option.png) **Step 5:** Then, add the target framework and project name in the configuration.

**Step 6:** Rearrange the configurations as shown in the following screenshot to run the output in the default web browser while debugging the application.  
 ![Rearrange the configurations](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Rearrange-the-configurations.png)

### Tasks configuration

Now, we’ll create the **tasks.json** file with the task names **debug** , **build** , and **NuGet restore** since we need to perform these operations while creating a new project using our extension.

In VS Code, tasks can be configured to run scripts and start processes. Many tools that are already present in VS Code can be used to create tasks without having to write a command or new code. For a workspace, tasks are configured from the **tasks.json** file in the **.vscode** folder. The following are the steps to create and configure **debug** in the tasks.json file.

**Step 1:** Go to **Terminal > Configure Tasks** as shown in the following screenshot.

![Go to Terminal and select Configure Tasks](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Go-to-Terminal-and-select-Configure-Tasks.png) **Step 2:** Create the **tasks.json** file by choosing the **.NET Core** option.

![choose the .NET Core option](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/choose-the-.NET-Core-option.png) **Step 3:** Modify the **tasks.json** file as shown in the following screenshot.  
 ![Modify the tasks.json file](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Modify-the-tasks.json-file.png)

### Palette command

Since VS Code does not support UI dialogs, we should create a palette command to get the project name and location from the user on creating a new project.

### Adding the command

**Step 1:** Open the VS Code Extension project we already created.  
**Step 2:** Open the **package.json** file and add the command shown in the following figure under the **Contributes** attribute to create a new command in the VS Code palette.

![Add the command in the package.json file under the Contributes attribute to create a new command in the VS Code palette](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/add-the-command-in-the-package.json-file-under-the-Contributes-attribute-to-create-a-new-command-in-the-VS-Code-palette.png) **Step 3:** Then, add the required NPM packages in the **packages.json** file by adding its dependencies. As you can see in the following screenshot, I have added **appdata-path** , **glob** , **line-reader** , **node-fetch** , and **vsce** to perform actions in the back end.

![Add the required NPM packages in the packages.json file by adding its dependencies](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Add-the-required-NPM-packages-in-the-packages.json-file-by-adding-its-dependencies.png) **Step 4:** Run the following command to restore the NuGet packages in the terminal at the root Extension project.

| `npm install` |

### Register the command

Register the created command to invoke the project creation process when clicking on the VS Code palette.

**Step 1:** Create new TypeScript files with the following names:

- **projectcreationcommand.ts** : Calls the project creation process when we click on the palette.
- **ProjectCreation.ts** : Has the logic for the project creation.

**Step 2:** Add the code to get the current workspace location and load the configuration in the **projectcreationcommand.ts** file as shown in the following screenshot.

![Add the code to get the current workspace location and load the configuration in the projectcreationcommand.ts file](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Add-the-code-to-get-the-current-workspace-location-and-load-the-configuration-in-the-projectcreationcommand.ts-file.png)

**Step 3:** Then, add the code to register the command in the **extension.ts** file.

```csharp
'use strict';
 
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
 
// import manager
import ProjectCreation from './ProjectCreation';
 
// import commands
import CreateSampleBlazorProjectCommand = require('./commands/projectcreationcommand');
 
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
 
    let projectCreation = new ProjectCreation(context, vscode.workspace.getConfiguration('projectTemplates'));
 
    // create project from template
    let createBlazorProjectFromTemplate = vscode.commands.registerCommand('extension.createSampleBlazorProject',
    CreateSampleBlazorProjectCommand.run.bind(undefined, projectCreation));
    context.subscriptions.push(createBlazorProjectFromTemplate);
}
 
// this method is called when your extension is deactivated
export function deactivate() {}
```
**Step 4:** In VS code, create a new project and copy the template files from the **templates** folder to this project location. Then, we can replace the project name in the required files.

**Note:** We can create a separate palette to get information from the user, like project name and project location, by using the **vscode.window.showInputBox()** method.

### Project creation

In VS Code, we don’t have a default API to create a new project using our palette. So, we have to add the logic for the directory copying process.

**Step 1:** Create a new file named **directoryUtilities.ts**.

**Step 2:** Add the TypeScript code to create and copy the directory. Please refer to this [source](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Mycode999817560) project to get the sample code for this process.

**Step 3:** Import this file in the project creation file to use these methods in the project creation.

```js
import dirUtils = require("./directoryUtilities");
```

**Step 4:** Add a new method **ProjectCreation** in the **ProjectCreation.ts** file.

![Add a new method ProjectCreation in the ProjectCreation.ts file](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Add-a-new-method-ProjectCreation-in-the-ProjectCreation.ts-file.png)

**Step 5:** Create a new method **addFromTemplate()** inside the **ProjectCreation** class as shown in the following screenshot.

![Create a new method addFromTemplate() inside the ProjectCreation class](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Create-a-new-method-addFromTemplate-inside-the-ProjectCreation-class.png)

 

**Step 6:** Get the project location from the user by using the following code inside of the **addFromTemplate()** method.

**Note:** In the input palette, you have to provide the default project location if you want to create the project there.

```js
let userPath: string = path.join(path.dirname(path.dirname(getAppDataPath())), "source", "repos");
        let projectLocationInput = <vscode.InputBoxOptions> {
            prompt: `Project Location`,
            value: userPath
        };
         
        // get user's input
        let projectLocation : string = await vscode.window.showInputBox(projectLocationInput).then(
            value => {
                if (!value) {
                    return projectLocation;
                }
                return value;
            }
            
        );
```

**Step 7:** Get the **project name** from the user by using the following code inside of the **addFromTemplate()** method.

**Note:** In the input palette, we have to show the default project name if we want to create the project with it.

```js
let defaultProjectName: string = "SampleBlazorApp1";
 
        let variableInput = <vscode.InputBoxOptions> {
            prompt: `Project Name`,
            value: defaultProjectName
        };
         
        // get user's input
        let projectName : string = await vscode.window.showInputBox(variableInput).then(
            value => {
                if (!value) {
                    return projectName;
                }
                return value;
            }
            
        );
        workspace = path.join(projectLocation, projectName);
```

**Step 8:** Now that we have the project location and project name, we should create the project using the provided information. We should copy the templates, change the project name to the name provided by the user, and place the project in the user-provided location.

Refer to the [source code](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Mycode999817560) for the project creation logic.

**Step 9:** Call the **addFromTemplate()** method inside the command we created in the **projectcreationcommand.ts** file to run this project creation process when a project is created using the option we made in the VS Code palette.

![Call the addFromTemplate() method inside the command we created in the projectcreationcommand.ts file](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Call-the-addFromTemplate-method-inside-the-command-we-created-in-the-projectcreationcommand.ts-file.png)

### Run the extension

**Step 1:** Press **F5** to run the sample extension in the VS Code instance. This will open a new VS Code Extension Development host instance.

**Step 2:** Press **Ctrl** + **Shift** + **P** to open the palette.

**Step 3:** Choose the **Create Blazor App** option from the palette with the Blazor keyword.

![Choose Create Blazor App option](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Choose-Create-Blazor-App-option.png)

**Step 4:** The **Project Location** palette will be displayed. Provide a location to create the project.

![Provide a location to create the project](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Provide-a-location-to-create-the-project.png)

**Step 5:** The **Project Name** palette will appear next. Provide a name for the project.

![Provide a name for the project](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Provide-a-name-for-the-project.png)

The Blazor server application will be created in the provided location with the provided name.

![Blazor server application is created in the provided location with the provided name](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Blazor-server-application-will-be-created-in-the-provided-location-with-the-provided-name.png)

**Step 6:** Run the created application by clicking **Run > Start Debugging**.

## Create extension (VSIX) file

In VS Code, the VSIX file will not be created automatically, so we have to create one by using the [**VSCE**](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) command-line tool.

**Step 1:** Open the terminal in VS Code and then execute the following command.

| `npm install –g vsce` |

**Step 2:** After VSCE is installed, create a VSIX file by using the following command.

| `vsce package` |

The VSIX file is now created in the VSIX project location as shown in the following screenshot.

![VSIX file is now created in the VSIX project location](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/VSIX-file-is-now-created-in-the-VSIX-project-location.png)

**Note:** Before creating the VSIX file, make sure you have provided the necessary content in the **README.md** file.

## Install the extension

You can manually install a VS Code extension packaged in a VSIX file. To do so, simply use the VS Code command line and provide the path to the VSIX file. For example:

| `code--install-extension myExtensionFolder\myExtension.vsix` |

![Install a VS Code extension packaged in a VSIX file](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Install-a-VS-Code-extension-packaged-in-a-VSIX-file.png)The extension will be installed under your **{user location}/.vscode/extensions** folder.

## Publish the extension to the Visual Studio Code Marketplace

Our VS Code extension can be published in the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/vscode) to share it with the public. Refer to [this documentation](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) page for instructions on publishing the extension in the VS Code Marketplace.

## Sample extension source code

You can download the complete source code of the sample extension we built from [this location](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Mycode999817560).

## Conclusion

I hope you found this article useful. Now you know how to create a Visual Studio Code project template, build a palette extension to use that project template, and publish the extension on the VS Code Marketplace for other developers to use. Let’s continue to use these new tools and capabilities to boost our project productivity!

Syncfusion offers 1,600+ components and frameworks for [Flutter](https://www.syncfusion.com/flutter-widgets), [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [Blazor](https://www.syncfusion.com/blazor-components), [Vue](https://www.syncfusion.com/vue-ui-components), [React](https://www.syncfusion.com/react-ui-components), ASP.NET ([Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/), [Core](https://www.syncfusion.com/aspnet-core-ui-controls)), [UWP](https://www.syncfusion.com/uwp-ui-controls), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/), [WinForms](https://www.syncfusion.com/winforms-ui-controls), and [WPF](https://www.syncfusion.com/wpf-ui-controls) to boost your application development speed. If you’re already a Syncfusion user, you can download the product setup from [our website](https://www.syncfusion.com/account/downloads). Otherwise, you can download a free, 30-day trial [here](https://www.syncfusion.com/downloads/wpf/).

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums)s, [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/). As always, we are happy to assist you!

The post [Creating Extensions for Visual Studio Code: A Complete Guide](https://www.syncfusion.com/blogs/post/creating-extensions-for-visual-studio-code-a-complete-guide.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).