前沿
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系統，你最希望有什麼功能？