前沿
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系統，就是不知道，大家希望有哪一些功能？如果大家有時間，希望大家在給我一些回報：
原文釋出時間為：2018年07月02日
本文作者：
vvpvvp本文來源：
掘金如需轉載請聯系原作者