HeyUI组件库发布vscode插件，PS教程: 如何开发vscode插件？

前沿

HeyUI组件库，我们项目组已经用了一年多了。
一直没有对应的组件库插件，我一直耿耿于怀。
所以，抽时间查阅了vscode的插件开发教程，终于把vscode的插件完成了。
在此奉上我们的插件库链接，多谢大家提建议。

git: github.com/heyui/heyui…
vscode: marketplace.visualstudio.com/items?itemN…

或者大家可以通过在vscode插件库中搜索 heyui-snippets进行安装。

HeyUI

如果对我们组件库不熟悉的小伙伴可以参见我们官网：
heyui.top
或者围观我们的github:
github.com/heyui/heyui

用例

其他不说，先把效果奉上。

vue单文件结构

首先：我提供了一个vue的输入提示，类似于emmit的!，生成vue单文件的基本结构。

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


        

          
        
        
        

          

          AI 代码解读
        
      
      

"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"


        

          
        
        
        

          

          AI 代码解读
        
      
      

一开始，如果参考sublime的snippet配置，scope是使用text.html.vue-html这种定义的，于是我在插件库的定义中使用这一种，发现不行，总之最后，终于尝试很久，把发现用的是后面的那一种配置。

在自定义的配置文档中：

"TestSnippet": {
	"scope": "vue-html", //设置scope
	"prefix": "TestSnippet",
	"body": [
		"<TestSnippet v-model=\"$1\"></TestSnippet>",
		"$2"
	],
	"description": "insert a TestSnippet component"
}


        

          
        
        
        

          

          AI 代码解读
        
      
      

就可以正确的使用snippet了。

插件的开发

在知道正确配置的情况下，转移到snippet插件的开发中，还是走了一些弯路，过程就叙述了，把正确的配置放出来：

package.json
scope定义在language属性上，是的，就是这么坑DIE

"contributes": {
    "snippets": [
        {
            "language": "vue",
            "path": "./snippets/vue.json"
        },
        {
            "language": "vue-html", //scope定义在language属性上
            "path": "./snippets/component.json"
        },
        {
            "language": "javascript",
            "path": "./snippets/javascript.json"
        }
    ]
}


        

          
        
        
        

          

          AI 代码解读