VSCode plug-in development series tutorial plan

Plan can not catch up with change, iteration at any time, welcome to leave a message

  • Create a new plugin using scaffolding ☑️
  • This section describes package.json configuration
  • TreeView
  • WebView
  • Listen for code input
  • How do I distribute your plugin ☑️

Install the official packaging tool

First we need to install the official plugin distribution tool, which can package our plugin project as a.vsix file or publish it directly to the plugin market

npm i vsce -g
Copy the code

If you do not set the repository in package.json, you will be prompted. You don’t have to fill this field (plug-ins can be open source), just select N.

Package as a.vsix file

vsce package
Copy the code

Once packaged, a.vsix file is generated in the project directory, which can only be installed through the plug-in search menu at the top right

Release the plugin to the plugin market

Register an Azure developer account

You need to have a Microsoft Pass, then open the Azure Developer Center and create an Azure development organization.

Create a new personal token

Note the selection of Full Access and expiration time, if the token expires, you need to go back to this page to create a new token.

After this step, be sure to copy and save your token string. After that, you can only create it, you can’t find it.

Sign up for a plug-in marketplace publishing account

Then we signed up for a plugin market publishing account and managed our own plugins in all markets.

Of course, we can also use the vsce command to create publishing accounts

Vsce create-Publisher Release account nameCopy the code

issue

vsce publish
Copy the code

This process also checks some required package.json fields, and if everything is correct, you will see the following figure

Launch success!

But at this time our plug-in is not in the market search, wait 5-10 minutes generally have.

Matters needing attention

  • README.mdIs the details of the plug-in home page;
  • Remember to update thepackage.jsonThe version number in;
  • ifpackage.jsonFill in therepositoryField, which will require you to submit to the warehouse before publishing;
  • README.mdThe image resource must be allHTTPS;
  • CHANGELOG.mdThis is the plug-in home pagechangeTAB.

Once the user installs your plugin, as long as they do not uninstall it, the plugin will be automatically updated when a new version is available.

Plug-in market SEO

It seems that there is not much talk about this topic, but where there is a search, there is a need for SEO

Pay attention to the big handsome doing full stack

Recent articles (thanks for your encouragement and support 🌹🌹🌹)

  • 🔥 made a night of animation, just to give you a better understanding of Vue3 Composition Api 866 likes
  • 🔥2020 update, Vue probe the effects of dragging cards 940 likes
  • 🔥 use scaffolding to create a new plug-in | VSCode plug-in development series 5 praise
  • 🔥 reveal Vue3 official teaching material animation production process, an article to teach you to do code demo GIF! 88 great
  • 🔥 Create an arcade joystick with Vue for 60 likes

Post title XXX | creator training camp The campaign is under way…