HeyUI component library releases vscode plug-in, PS tutorial: how to develop vscode plug-in?

At the forefront of

HeyUI component library has been used by our project team for more than a year. There has been no corresponding component library plug-in, and I have been annoyed. Therefore, I took the time to consult the vscode plug-in development tutorial, and finally completed the vscode plug-in. Here is a link to our plugin library. Thank you for your suggestions.

Git: github.com/heyui/heyui… Vscode: marketplace.visualstudio.com/items?itemN…

Or you can install it by searching for heyui-snippets in the vscode plug-in library.

HeyUI

If you are not familiar with our component library, please refer to our official website: heyui.top or check out our github: github.com/heyui/heyui

Use cases

First of all, give me the effect.

Vue single file structure

First: I provide a vue input prompt, similar to emmit’s! Generate vUE single file basic structure.

Component input prompts for the Heyui component library

Heyui component library has a lot of components, if there is no component input prompt, basically, we need to write a lot of components of the label, here we provide all the component library input prompt, to facilitate the efficiency of program writing.

Component Input prompt

Method Input prompt

The tutorial

If you are curious about how to develop vscode plug-ins, you can read on. Heyui-snippets is a simple plug-in that simply prompts for input. This input prompt, you can actually customize in vscode, convenient for their own development.

Custom input prompts

I’ll start with a tutorial for customizing input prompts: First Shift+Command+P, open the Command input box, type in snippet, and click on Preference: Configure user snippets

There is no default configuration item in the system since I am used as input prompt for the VUE file. We can create a new configuration item.

Create the vue.code-snippets file

Configuration files are automatically generated, and you can modify the configuration files to achieve snippet functionality.

"TestSnippet": {
    "prefix": "TestSnippet",
    "body": [
    	"<TestSnippet v-model=\"$1\"></TestSnippet>"
    ],
    "description": "insert a TestSnippet component"
}
Copy the code

As shown in the preceding code, I configured an input prompt for a TestSnippet component, which is applied to the VUE code like this:

One downside to this, however, is that the prompt also appears in the javascript code.

So we need to configure the scope property, and here we encounter a pitfall. The template snippet of vue is not documented on vscode’s official website. In addition, the definition and configuration of scope are also vague. In short, IT took me a long time to figure it out. In vscode, we will install vetur, which is basically a vue language plug-in. In this plug-in, vue is defined as follows:

"text.html.basic": "html",
"text.html.vue-html": "vue-html",
"text.pug": "pug",
"text.haml": "haml",
"source.css": "css",
"source.css.scss": "scss",
"source.css.less": "less",
"source.css.postcss": "postcss",
"source.sass": "sass",
"source.stylus": "stylus",
"source.js": "javascript",
"source.ts": "typescript",
"source.coffee": "coffeescript",
"text.html.markdown": "md",
"source.yaml": "yaml",
"source.json": "json",
"source.php": "php"
Copy the code

At first, if I refer to the snippet configuration for sublime, the scope is defined as text.html.vue-html, so I used it in the definition of the plugin library, but it didn’t work. In the end, I tried for a long time and used the later configuration for discovery.

In a custom configuration document:

"TestSnippet": {
	"scope": "vue-html"./ / set the scope
	"prefix": "TestSnippet"."body": [
		"<TestSnippet v-model=\"$1\"></TestSnippet>"."$2"]."description": "insert a TestSnippet component"
}
Copy the code

You can use snippet correctly.

Plug-in development

When you know the correct configuration, you move to the snippet plug-in development and still make some detour, the process is stated, putting the correct configuration out:

The package.json scope is defined on the language property

"contributes": {
    "snippets": [{"language": "vue"."path": "./snippets/vue.json"
        },
        {
            "language": "vue-html".// Scope is defined on the language property
            "path": "./snippets/component.json"
        },
        {
            "language": "javascript"."path": "./snippets/javascript.json"}}]Copy the code

Component. json should be configured as normal.

As for the plug-in upload, there is no more description, we can directly register an account to publish.

support

Having said that, I hope you can support my HeyUI component library

The next step

Next, I will supplement the ADMIN system of HeyUI. I just don’t know what functions you hope to have. If you have time, I hope you can give me some feedback: HeyUI ADMIN system, what function do you want most?