karatejb: [VSCODE] Create and Publish Extension Pack

Visual Studio Code Extension Pack Vue.js

▌Introduction

We will learn how to create a Visual Studio Code Extension Pack in a few steps by YEOMAN.

▌Environment

▋node.js 10.15.0

▋npm 6.4.1

▋YEOMAN 3.1.0

▌Implement

▋Install YEOMAN and Extension and Customization Generator

Use npm to install

· Yo (YEOMAN)

· generator-code (Yo Code-Extension and Customization Generator)

· vsce (Visual Studio Code Extensions CLI)

$ npm install -g yo generator-code vsce

▋Create New Extension Pack project

Now we can use Visual Studio Code Extension generator to crate a new Extension Pack project.

$ yo code

Choose New Extension Pack as below,

Follow the prompt to fill the options and complete the project template. For example, I will create a popular Vue.js Extension pack,

1. What type of extension do you want to create? New Extension Pack

2. Add the currently installed extensions to the extension pack? No (or Yes to automatically includes the extensions you have already installed)

3. What's the name of your extension? Vue.js Extension Pack

4. What's the identifier of your extension? vuejs-extension-pack

5. What's the description of your extension? VSCode popular extensions for Vue.js Development

Then the generator will create the related files for us,

What we have now,

▋Enter your favorite extensions

Open package.json and enter your favorite extension id into the section: "extensionPack".

Take Vetur for example, its Marketplace url is

https://marketplace.visualstudio.com/items?itemName=octref.vetur

So "octref.vetur" is Vetur’s extension id and lets put it into the "extensionPack" section.

{

"name": "vuejs-extension-pack",

"displayName": "Vue.js Extension Pack",

"description": " VSCode popular extensions for Vue.js Development",

"version": "0.0.1",

"engines": {

"vscode": "^1.36.0"

"categories": [

"Extension Packs"

"extensionPack": [

"octref.vetur",

]

}

▋Packing

Now we will use vsce (Visual Studio Code Extensions CLI) to pack the Extension Pack.

$ vsce package

The command will create the VSIX file.

We can distribute the VSIX file to other crews to install the Extension Pack on Visual Studio Code by

Press CTRL + P and enter "> Extensions: install from VSIX"

Or use the GUI as following,

Result:

▋Publish

▋Fulfill package.json

Make sure to set the value of "publisher" and the value of "categories" must be "Extension Packs".

See sample package.json (Github).

Furthermore, here are we have to do before publish to Visual Studio Code Marketplace,

1. Create Publisher

2. Get an Access Token

▋Create Publisher

Go to Visual Studio Code Marketplace, click [Publish extensions]

Now as a Publisher, we can publish the Extension Pack.

▋Publish Extension Pack

The Marketplace supports upload Visual Studio Code extension(s) on

https://marketplace.visualstudio.com/manage/publishers/{publisher_id}

Another way is using the vsce (Visual Studio Code Extensions CLI) to publish.

However we need to create an Access Token from Azure DevOps.

Visual Studio Code leverages Azure DevOps for its Marketplace services. This means that authentication, hosting, and management of extensions are provided through Azure DevOps.

vsce can only publish extensions using Personal Access Tokens. You need to create at least one in order to publish an extension. (From code.visualstudio.com)

Go to your/your organization’s Azure DevOps, Click on the Avatar and select [Security] -> [Personal access tokens] -> [New Token]

· Organization: "All accessible organizations".

· Scopes: click [Show more scopes] and find [Marketplace], check "Acquire" and "Manage".

· [Create] and copy the personal access token.