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单文件的基本结构。

heyui组件库的组件输入提示

heyui组件库有不少组件，若是没有组件的输入提示，基本上，咱们都须要手写不少组件的标签，这里咱们提供全部的组件库输入提示，以方便程序编写中的效率。

Component 输入提示

Component
Affix
BackTop
Badge
Checkbox
Circle
Category
Datetime
DropdownCustom
DropdownMenu
Form
FormItem
Menu
Modal
ModalComponent
Pagination
Poptip
Progress
Radio
Rate
Slider
Loading
Steps
Search
Select
Switch
SwitchList
Tabs
TagInput
Tree
TreePicker
NumberInput
Tooltip
Uploader
AutoComplete
Timeline
TextEllipsis
Table
TableItem
Row
Col
Button
ButtonGroup

Method 输入提示

Method
$Message
$Notice
$Confirm
$Loading
$ScrollIntoView

教程

写了这么多，若是你们对于如何开发vscode的插件比较好奇的话，能够往下接着看。
其实heyui-snippets是比较简单的插件，就是单纯的输入提示。
这种输入提示，你们其实能够在vscode中自定义，方便本身的开发。

自定义输入提示

我首先把自定义输入提示的教程放出来：
首先 Shift+Command+P，打开命令输入框，输入snippet，点击首选项：配置用户代码片断

因为我是用来作vue文件的输入提示，系统中并无默认的配置项，咱们能够经过新建的方式建立配置项。

建立vue.code-snippets的文件

系统会自动生成配置文件，你能够经过修改配置文件来达到snippet的功能。

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

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

可是，这个有一个很差的问题，就是在javascript代码中也会出现提示。

因而咱们就要配置scope属性，这里就遇到了一个坑，vue的template代码片断，在vscode官网中，是没有文档的。
并且，对于scope的定义与配置也是模糊不清，总之，我尝试了好久，才弄清楚。
vscode中，咱们会安装vetur，这个基本上算是vue语言插件，在这个插件中，对于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"
        }
    ]
}

复制代码

component.json就按照正常的配置就能够了。

至于插件的上传，就很少描述了，你们直接注册帐号发布就能够了。

支持

说了这么多，也但愿你们多支持个人组件库 HeyUI组件库

下一步

下一步，我会补充咱们HeyUI的ADMIN系统，就是不知道，你们但愿有哪一些功能？若是你们有时间，但愿你们在给我一些反馈：
HeyUI ADMIN系统，你最但愿有什么功能？