preface

Take advantage of the free time on Saturday and Sunday to understand the vscode plug-in or code snippet release routine.

Originally look for next GG have what article the article that predecessors walk through, finally seem to have no, that can fumble for oneself only.

Start with official documents!! Practice leads to truth….

em.. Self think English is good and self-study ability grey often good big guy, here can stop reading, save the waste of time!

What can you gain by learning this? Opinions differ…

But at least you know how to publish and have a better understanding of NPM’s package.json.

The general process of publishing

  1. I have a Microsoft account
  2. Log on to the market and create a team
  3. To create aPersonal Access token
  4. Global installationvsceThe module
  5. Create a new repository on Github
  • Key points,package.jsonThe writing of
  • snippetsThe json file
  • Corresponding static files, etc. (image)
  1. The last step is publishing, and it depends on the results of our own publishing

1. Microsoft account

em…… Create your own and then visit vscode maketplace

Portal: VSCode Marketplace => Sign in

There are also two official documents in the upper right corner:

  • Build your own: Document outline for extending this section
  • Publish Extensions: this is a Publish extensions management platform that you log in to.

2. Log into the marketplace and create a team

You just logged into your account and this is the page you see.

Is not a face meng force!! I was confused when I logged in…

You will have to Upload a new extension.

In fact, here is a summary platform after you have plug-in published!! (Remember it’s a plugin extension!)

Can simplify the update process, directly upload the packaged plug-in..

As shown in the figure, Microsoft’s Plug-in store is for all three platforms. Click on Visual Studio Code to check it out!

Drag upload VSIX format? This is the main file of the VSCode plugin… If you have released a plugin, drag the new plugin to update the version directly.

All that said, it’s just science… We haven’t released it yet. Tell us what we need to focus on.

Click the username you logged in to – top right

It’s in English, yes… Want to change Chinese, avatar? so easy ! Click edit profile to go in, change the avatar and display language, time zone, etc

Instead of editing personal information, talk about creating team services. Because you can’t get a Personal Access Token without a team

There are a few options for the next step, just go for Asia-Pacific… I operated it in English, and then I went to check whether there was a Chinese display…

3. Create onePersonal Access Token

Github’s Access Token allows Access to credentials (controllable! Because it can be partially functional)

Click on the team in the upper right corner, as shown in the picture

As shown above, the string circled in red is the token used in the release!! Keep it! , will not permanently display!! Log in again and you’ll never see them again

4. InstallVSCE

NPM install -g vsce; Say command line arguments…

  # vsce --help

  Usage: vsce [options] [command] Options: -V, --version output the version number -h, --help output usage information Commands: Publish [options] [<version>] Unpublish [options] [< extensionID >] list <publisher> Lists all publishers under a publisher. The token value needs to be configured. Otherwise, ls-publishers is prompted to list all known publishers create-publisher <publisher> Create a new publisher delete-publisher <publisher> Delete a publisher login <publisher> Log a publisher to the publisher listlogout<publisher> Otherwise, exit the publisherCopy the code

Note: The token needs to be retained. If you log out or log in for the first time, this is required. If you do not log out after login, the credentials are saved in the local…. by default But keep it anyway!! Maybe we’ll need it again someday!

5. Software warehouse!

  • New warehouse, associated warehouse these skipped! , skip
  • Snippet writing pose!! Skip to find out for yourself, there are a lot of configurable…
  • Package. json — this is what I’m talking about… Fumbling around for a long time..

Take a look at the directory structure first

├─ ├─ download.png ├─ download.png ├─ download.png ├─ download.png ├─ download.png ├─ download.png ├─ download.png ├─ download.png ├─ download.png ├─ download.png Package. json // release rules and configure ├─.gitignore // gitignore file ├─.vscodeignore // vscode to submit proprietary ignore file ├─ snippets // place code fragments in │ ├─ ├─ vue. Json ├─ vue. ├─ vue, vue, vue, vue. // Packaging snippets as plug-ins does not execute vsce packageCopy the code

package.json

Package. json look at my comments, the actual file is not annotated. Otherwise, a JSON error or invalid will be reported

{"name": "vscode-vue-ts-snippet", // package name" version": "0.0.1", // version H "description": "Vue with Typescript Snippets ", // Package description "icon": "icon/icon.png", // display plugin icon" publisher": "Crperlin ", // vscode plugin's own property, publisher "repository": {// package repository" type": "Git", / / type git "url" : "https://github.com/crper/vscode-vs-ts-snippets.git"} / / access links, "galleryBanner" : {// banner description "color": "#0273D4", "theme": "dark"}, "scripts": {"test": "echo \"Error: no test specified\" && exit 1" }, "keywords": ["vue","typescript-vue","typescript","vue-snippets","vue-ts-snippets","vue-typescript-snippets","vue2+"], "Engine ":{// Limit vscode version "vscode": "^1.18.0"}, "author":{ "crper(QunHe Lin)", "email": "[email protected]", "url": "https://github.com/crper" }, "categories": [// Category of add-ons "Snippets", "Other"], "contributes":{// Here is how to index Snippets, how to let the add-ons know what you share "Snippets" : [{"language": "Vue ", // For.vue format snippets "path":"./snippets/vue.json"}, {"language": "Typescript ", // For.typescript snippets "path":"./snippets/vue-typescript. Json"}, {"language": "Javascript ", // for.js snippets "path":"./snippets/vue-typescript. Json"}]}, "bugs": {/ / general feedback is a bug, the path of the issue "url" : "https://github.com/crper/vscode-vs-ts-snippets/issues"}, "homepage" : "Https://github.com/crper/vscode-vs-ts-snippets/readme", / / package home page, where is the "license" : "SEE license IN license" / / package deal! }Copy the code

For more information about package.json and what it does, see NPM package.json help

6. Publish and view the results

Tips:

  • Create a publisher and you will be prompted totokenThat’s the onePersonal Access Token; Enter the login state
  • If you manually exit (vsce logout xxxx), you still need to enter when you log in againtoken
  • Look at my screenshots0.0.3, is actually readpackage.jsonInside the custom version number, update the content remember must update the version number!

My test snippet, portal: vue-ts-Snippet;

Installation is not recommended!! Just for testing..

Of course, if you guys are willing to help me maintain it, it can become a useful snippets library over a period of time

conclusion

At this point, you want to write your own library of snippets and publish them to the store for the benefit of others.