Visual
Studio Code Extension
Pack Vue.js
▌Introduction
▌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
$ 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".
https://marketplace.visualstudio.com/items?itemName=octref.vetur
{
"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
$ 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".
Furthermore,
here are we have to do before publish to Visual Studio Code Marketplace,
1. Create Publisher
2. Get an Access Token
▋Create Publisher
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}
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.
▌Reference
