Publish VSCode extension to VS Marketplace using simplified ChatOps
Tags: vscode, extensions, chatops
Published: 2021-02-26 22:56:41

---
title: Publish VSCode extension to VS Marketplace using simplified ChatOps
published: true
date: 2020-08-10 23:00:00 UTC
tags: 
- vscode
- extensions
- chatops
canonical_url: https://www.visualstudiogeeks.com/azure/devops/chatops-for-vscode-extension
---

I have previously [blogged](https://www.visualstudiogeeks.com/github/extensions/publish-vscode-extension-using-github-actions) about publishing VSCode extensions to VSMarketplace (using GitHub actions). However, that workflow relied heavily on the branching strategy and was on assumption that anything that is merged to `master` is ready for publishing to VSMarketplace. It worked great, but occasionally I felt the need to test the extension from `master` and I wanted a way to **approve** before I decide to publish to marketplace. In this post we will see how I used ChatOps with the help of GitHub actions and Issues to achieve the same.

<!--more-->
### How will it work?

If you are short on time, the workflow I have implemented is as below.

1. User commits the code in a feature branch
2. Commit automatically triggers CI workflow `build.yml`
  - If trigger is from `feature/*` branch, it produces the artifact (.vsix file) and ends the workflow. This allows me to download and test the vsix file.
  - If trigger is from `master` branch, it creates a GitHub issue to monitor for dispatch comments (`/deploy` and `/reject`).
3. Workflow `dispatch.yml` monitors issue comments for dispatch commands.
4. I create a issue comment and type text `/deploy` or `/reject` to deploy or reject a release to publish it to VS Marketplace.
5. If `/deploy` command is detected, workflow `deploy.yml` is triggered.
6. If command is instead `/reject`, the release is rejected and issue is marked that it can be closed.

Curious on how each step is implemented? Read on.

### Triggering CI build when user commits

The goal of CI is that, with each commit, we can produce shippable `.vsix` (packaged extension) file as an artifact for our extension. So we additional triggers in our `build.yml` file.

```yml
on:
  workflow_dispatch:
    inputs:
      action:
        description: Trigger build
        required: true
        default: "ci"
  pull_request:
    branches:
      - master
  pull_request_review:
    branches:
      - master
    types:
      - submitted
  push:
    branches:
      - feature/** # match an pushes on feature/* and feature/<any sub branch>/*
      - master
    paths-ignore: # don't run when changes made to these folders
      - ".vscode/**"

```

- `workflow_dispatch` trigger lets us manually trigger the workflow.

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-08-11-chatops-for-vscode-extension/workflow-dispatch.png)

- `pull_request` and `pull_request_review` triggers allow us to trigger this workflow on PRs
- `push` lets our workflow to trigger on actual commits on `master` and `feature/**` branches.

### Creating issue for dispatch events

As part of CI, once we produce artifact, we create the issue so that we can monitor issue for dispatch commands. I have a separate job `create-issue` in `build.yml` which creates the issue only if CI is running against `master` branch.

You can take a look at the job [here](https://github.com/onlyutkarsh/git-config-user-profiles/blob/29411fba2bef504e945690f8e02785c616a6ee96/.github/workflows/build.yml#L93-L121)

The output of the job will open an issue something like this (screenshot is from previous release).

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-08-11-chatops-for-vscode-extension/created-issue.png)

### Monitoring dispatch events in issue comments

The required issue is created and now is the time to monitor for issue comments with specific commands we defined - `/dispatch` and `/reject`.

We can do this with `issue_comment` trigger as below.

```yml
on:
  issue_comment:
    types:
      - created

```

With the above trigger our `dispatch.yml` workflow triggers whenever a comment is added on our issue. To dispatch the events I am using action from Peter Evans as below.

```yml
- name: dispatch command
  if: github.repository_owner == github.event.comment.user.login
  uses: peter-evans/slash-command-dispatch@v2
  with:
    token: ${{ secrets.REPO_ACCESS_TOKEN }}
    reaction-token: ${{ secrets.REPO_ACCESS_TOKEN }}
    commands: deploy, reject

```

[![GitHub Actions](https://img.shields.io/badge/github-slash--command--dispatch-brightgreen?logo=github-actions&logoColor=white&label=Github%20Actions)](https://github.com/marketplace/actions/slash-command-dispatch)

As you can see, in the last line (#7), I am supporting only `deploy` and `reject` commands.

> I want to dispatch events, only if user commenting on the issue is owner of the repository (which is me). This allows me to dispatch events only if I have typed the dispatch command and no on else.

### Handling dispatch commands

Now, I want to **deploy** to marketplace, when I see `/deploy`, and **reject** the deployment when I see `/reject` in issue comment.

For this, I have two workflow files [deploy.yml](https://github.com/onlyutkarsh/git-config-user-profiles/blob/master/.github/workflows/deploy.yml) and [reject.yml](https://github.com/onlyutkarsh/git-config-user-profiles/blob/master/.github/workflows/reject.yml) with trigger similar to below.

```yml
on:
  repository_dispatch:
    types:
      - deploy-command

```

So as soon as the user types `/deploy` command as a issue comment, the command is captured and dispatched by `dispatch.yml` workflow.

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-08-11-chatops-for-vscode-extension/deploy-command.png)

The dispatched command is captured by our `deploy.yml` or `reject.yml` which act on `repository_dispatch` event of either `deploy` or `reject` commands. All this work seamlessly with the help of `slash-command-dispatch` action and GitHub’s `repository_dispatch` events.

Our deploy workflow just publishes the extension to VS Marketplace and before doing this it also updates the comments to the issue which triggered the workflow.

![](https://www.visualstudiogeeks.com/images/screenshots/utkarsh/2020-08-11-chatops-for-vscode-extension/deploy-complete.png)

### Conclusion

There you have it! A quick and simple way to have a approval process in GitHub actions using ChatOps. I am confident that GitHub Actions will have OOB approval flows in Actions, but until that time, this is one way to achieve it. Do let me know if you know or have implemented similar things in a better way - I would love to learn about it.