2019年7月27日 星期六

[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)

$ 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.





Back to the project and login as the publisher (the Access Token will be required),

$ vsce login <publisher>
Personal Access Token for publisher 'xxxxx': ***********************


Now we can publish the Extension Pack by

$ vsce publish



Result:




The above commands can be simplified as

$ vsce publish -p <Access_Token>



And we can see the Extension Pack is uploaded successfully.



The Extension Pack in on Marketplace now 😊







Reference







沒有留言:

張貼留言