前沿

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

如上段代码所示，我配置了一个TestSnippet组件的输入提示，那在vue代码中应用是这个样子的：

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

一开始，如果参考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"
}

就可以正确的使用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"}]
}