HeyUI元件庫釋出vscode外掛,PS教程: 如何開發vscode外掛?

vvpvvp發表於2019-02-09

前沿

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元件庫釋出vscode外掛,PS教程: 如何開發vscode外掛?

heyui元件庫的元件輸入提示

heyui元件庫有很多元件,如果沒有元件的輸入提示,基本上,我們都需要手寫很多元件的標籤,這裡我們提供所有的元件庫輸入提示,以方便程式編寫中的效率。

HeyUI元件庫釋出vscode外掛,PS教程: 如何開發vscode外掛?

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,點選首選項:配置使用者程式碼片段

HeyUI元件庫釋出vscode外掛,PS教程: 如何開發vscode外掛?

由於我是用來做vue檔案的輸入提示,系統中並沒有預設的配置項,我們可以通過新建的方式建立配置項。

HeyUI元件庫釋出vscode外掛,PS教程: 如何開發vscode外掛?

建立vue.code-snippets的檔案

HeyUI元件庫釋出vscode外掛,PS教程: 如何開發vscode外掛?

系統會自動生成配置檔案,你可以通過修改配置檔案來達到snippet的功能。

"TestSnippet": {
    "prefix": "TestSnippet",
    "body": [
    	"<TestSnippet v-model="$1"></TestSnippet>"
    ],
    "description": "insert a TestSnippet component"
}
複製程式碼

如上段程式碼所示,我配置了一個TestSnippet元件的輸入提示,那在vue程式碼中應用是這個樣子的:

HeyUI元件庫釋出vscode外掛,PS教程: 如何開發vscode外掛?

但是,這個有一個不好的問題,就是在javascript程式碼中也會出現提示。

HeyUI元件庫釋出vscode外掛,PS教程: 如何開發vscode外掛?

於是我們就要配置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系統,你最希望有什麼功能?

相關文章