Put wife first, XDM carry knife ！！！！

What is a vscode – snippets

As the name implies, it is a code fragment on vscode, a lot of code repetition in the development process, without copy, input shortcut keys quickly generated

For example (vUE code quick generation):

  1. Create a new VUE file and type in the shortcut command XDM/XSWL/ Rattail juice

  2. Snap! Snap! Uniapp Vue template code generated!!

Industry excellent extension Vue VSCode Snippets

  1. Vue VSCode Snippets have been downloaded a lot100w+
  2. Template support (Vue, Template, Script, Vuex, vue RouterEtc.)

It can not only quickly generate HTML code but also js method, vueAPI, Vue Router, vuex, React and other code blocks greatly improve our development efficiency

Let’s show it locally

  1. Open vscode MAC Command + Shift + P

  2. Select the fragment JS template

  3. And then CV the code and you’re done.

    {" js template ": {" prefix" : "not", "demo2]", "body" : [". The console log (' you are so handsome ') ",], "description" : "create a js frame" } }Copy the code

    • Js template is the fragment name.

    • Prefix defines one or more shortcut keys (demo1, demo2)

    • The body requires a snippet that is quickly generated

    • Description is the description of the segment.

How do I write template fragments?

Just throw in whatever code we want to generate quickly, and there are some advanced uses for setting cursor positions, placeholders, variables, and other fragment syntax portals.

Now that we know how to write it and run it locally, how can we publish it to the vscode market for people to play with?

How to publish your snippets to vscode marketplace

1. Global installation dependencies

Vsce package management tool

npm install -g vsce
Copy the code

Project scaffolding

npm install -g yo generator-code
Copy the code

2. Create projects quickly

yo code
Copy the code

Select New Code Snippets

Enter the package name, description, and so on as prompted to generate the project

3. Obtain a personal access token

  1. First, create your own organization in Azure DevOps login

  2. Select “New Organization”

  3. Creating an organization succeeded. Procedure

  4. Create a project

  5. Select personal access tokens from the organization’s home page:

  • Setting the Token Name

  • Set the organization to all accessible organizations

  • The expiry date can be extended at the option

  • Set the scope to custom, then choose Market > Manage Scope

Token generation succeeded

4. Create a publisher

Run the vsce login command

vsce login <publisher name>
Copy the code

Enter the token you created earlier

5. Develop snippets and publish

Vsce publish 2.0.1 // VSCE publish minor // Automatically add vsCE unpublish (publisher) Name).(Extension name) // Unpublish the extensionCopy the code

6. Click on the key section to explain the meaning of package.json property

  1. Package. json file illustration
  • Version (red area) : The version number must be changed every time it needs to be published otherwise it will not be sent (this pit has been stepped on)
  • Engines (blue area) : minimum vscode version support is required to use this extension until vscode version 1.28.0 or later
  • Repository (yellow area): remote repository address
  • Contributes (white area): Snippets configuration keys set the language, aliases set the alias, and so on