2019-12-27: Create Visual Studio Code Extension container development environment with Azure DevOps

This article describes how to get started quickly with a container based development environment for creating Extensions for Visual Studio Code.

Motivation

One, I want to create an extension for Visual Studio Code and, two, I want to test the Windy API integration. The result will probably be a very useless extension that shows the current weather in Visual Studio Code:) The Windy integration is described in this article => https://geircode.atlassian.net/wiki/spaces/geircode/pages/1037795500/2020-01-03+Create+Visual+Studio+Code+Extension+for+the+Windy+API?moved=true

Sources:

Docker Hub: https://hub.docker.com/repository/docker/geircode/vscode-extension-workspace

What to do:

Setup a local VSCode extension zero-config development environment using Docker Containers
Create a extension in VSCode
Package and publish the extension at the Marketplace
Setup automatic build and deploy to the Marketplace using the CI/CD pipeline in Azure DevOps

Usefull links to get started:

Setup a local VSCode extension zero-config development environment using Docker Containers

This will setup a local development environment without installing any tooling on the local computer.

Start the local development environment:

mkdir vscode
cd vscode
git clone https://bitbucket.org/geircode/vscode-extension-workspace

Execute the scriptfile “docker-compose.build.up.bat“. This will build and start a container with all vscode extension development tooling installed.

The container will start in the context of the user “yeoman“ in order for the “yo” command to work.

Create a extension in VSCode

Execute this command in the container:

yo code

Choose type of extension and enter some details:

Go to the local directory on Windows Host to see the files on the shared volume:

cd vscode\vscode-extension-workspace-volume

Open Visual Studio Code here:

code .

Push F5 to start debugging the extension. This will open another vscode with the extension installed:

Push F1 and type “Hello” to see the extension in action:

Yay! Well, hello there.

Package and publish the extension at the Marketplace

Next step is to setup the build and deploy pipeline in order to push new versions automatically to the Marketplace in order to get fast feedback.

I will be following this guide at https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions.

Create publisher in the Marketplace publisher

This will be where the extension will be deployed to and made accessable for all Visual Studio Code users. Go to https://marketplace.visualstudio.com/manage and you will get something like this:

Login Azure DevOps at https://dev.azure.com/

Create a new organization/project in Azure DevOps. Example: https://dev.azure.com/geircode/vscode-extension/

Create a Personal Access Token. Example URL: https://dev.azure.com/geircode/_usersSettings/tokens

Build the extension using VS Code Extension Manager ‘vsce’ command in the Container:

Let’s try to package the extension:

Now we get an ERROR stating the we are missing publisher name.

The docs/guide say: “Every extension needs to include a publisher name in its package.json file.“. Why didn’t they just include this in the “yo code” template, or automate it in some other way? Oh well.

Open package.json and insert the name of the publisher you created earlier

Try to package again

Yet another ERROR. Again, this could have been avoided by just fixing the yo code template.

Fix the Readme file

Easy fix is to remove the template text completely

Try to package again

Another WARNING, but if we ignore it then this time it actually builds.

10. Publish the package

Use vsce publish and the Personal Access Token from earlier.

A list of my extensions https://marketplace.visualstudio.com/publishers/geircode

Also go to https://marketplace.visualstudio.com/manage to manage your extensions.

11. Install extension from Marketplace

Search for your extension in Visual Studio Code:

Ooo, that’s quite fun:)

Setup automatic build and deploy to the Marketplace using the CI/CD pipeline in Azure DevOps

For simplicity I added the vscode extension into the Azure DevOps repository:

https://dev.azure.com/geircode/vscode-extension/_git/vscode-extension-test

To setup the pipeline I will follow this guide: https://code.visualstudio.com/api/working-with-extensions/continuous-integration

Add azure-pipelines.yml as described in the guide

The file is here:

https://dev.azure.com/geircode/vscode-extension/_git/vscode-extension-test?path=%2Fazure-pipelines.yml

Start a build

Open pipelines in Azure DevOps:

Run the pipeline:

https://dev.azure.com/geircode/vscode-extension/_build/results?buildId=9&view=results

The pipeline will not run right out of the box as described in the guide.

Since that did not work, I am creating a new pipeline based on containers.

Create a pipeline with containers

https://docs.microsoft.com/en-us/azure/devops/pipelines/process/container-phases?view=azure-devops&tabs=yaml

Starting simple to see if it works (Tracer bullet)

This article describes how to get started quickly with a container based development environment for creating Extensions for Visual Studio Code.

Motivation

One, I want to create an extension for Visual Studio Code and, two, I want to test the Windy API integration. The result will probably be a very useless plugin that shows the current weather in Visual Studio Code:) The Windy integration is described in this article => https://geircode.atlassian.net/wiki/spaces/geircode/pages/1037795500/2020-01-03+Create+Visual+Studio+Code+Extension+for+the+Windy+API?moved=true

Sources:

Docker Hub: https://hub.docker.com/repository/docker/geircode/vscode-plugin-workspace

What to do:

Setup a local VSCode plugin zero-config development environment using Docker Containers
Create a plugin in VSCode
Package and publish the plugin at the Marketplace
Setup automatic build and deploy to the Marketplace using the CI/CD pipeline in Azure DevOps

Usefull links to get started:

Setup a local VSCode plugin zero-config development environment using Docker Containers

This will setup a local development environment without installing any tooling on the local computer.

1. Start the local development environment:

Execute the scriptfile “docker-compose.build.up.bat“. This will build and start a container with all vscode plugin development tooling installed.

The container will start in the context of the user “yeoman“ in order for the “yo” command to work.

Create a plugin in VSCode

Execute this command in the container:

Choose type of plugin and enter some details:

Go to the local directory on Windows Host to see the files on the shared volume:

Open Visual Studio Code here:

code .

Push F5 to start debugging the plugin. This will open another vscode with the plugin installed:

Push F1 and type “Hello” to see the plugin in action:

Yay! Well, hello there.

Package and publish the plugin at the Marketplace

Next step is to setup the build and deploy pipeline in order to push new versions automatically to the Marketplace in order to get fast feedback.

I will be following this guide at https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions.

1. Create publisher in the Marketplace publisher

This will be where the plugin will be deployed to and made accessable for all Visual Studio Code users. Go to https://marketplace.visualstudio.com/manage and you will get something like this:

2. Login Azure DevOps at https://dev.azure.com/

3. Create a new organization/project in Azure DevOps. Example: https://dev.azure.com/geircode/vscode-plugin/

4. Create a Personal Access Token. Example URL: https://dev.azure.com/geircode/_usersSettings/tokens

5. Build the plugin using VS Code Extension Manager ‘vsce’ command in the Container:

Let’s try to package the plugin:

Now we get an ERROR stating the we are missing publisher name.

The docs/guide say: “Every extension needs to include a publisher name in its package.json file.“. Why didn’t they just include this in the “yo code” template, or automate it in some other way? Oh well.

6. Open package.json and insert the name of the publisher you created earlier

7. Try to package again

Yet another ERROR. Again, this could have been avoided by just fixing the yo code template.

8. Fix the Readme file

Easy fix is to remove the template text completely

9. Try to package again

Another WARNING, but if we ignore it then this time it actually builds.

10. Publish the package

Use vsce publish and the Personal Access Token from earlier.

A list of my plugins https://marketplace.visualstudio.com/publishers/geircode

Also go to https://marketplace.visualstudio.com/manage to manage your plugins.

11. Install plugin from Marketplace