HeyUI組件庫發佈vscode插件，PS教程: 如何開發vscode插件？

時間 2019-11-17

標籤 heyui 組件發佈 vscode 插件教程如何開發简体版

原文原文鏈接

前沿

HeyUI組件庫，咱們項目組已經用了一年多了。
一直沒有對應的組件庫插件，我一直耿耿於懷。
因此，抽時間查閱了vscode的插件開發教程，終於把vscode的插件完成了。
在此奉上咱們的插件庫連接，多謝你們提建議。javascript

git: github.com/heyui/heyui…
vscode: marketplace.visualstudio.com/items?itemN…php

或者你們能夠經過在vscode插件庫中搜索 heyui-snippets進行安裝。css

HeyUI

若是對咱們組件庫不熟悉的小夥伴能夠參見咱們官網：
heyui.top
或者圍觀咱們的github:
github.com/heyui/heyuihtml

用例

其餘不說，先把效果奉上。vue

vue單文件結構

首先：我提供了一個vue的輸入提示，相似於emmit的!，生成vue單文件的基本結構。java

heyui組件庫的組件輸入提示

heyui組件庫有不少組件，若是沒有組件的輸入提示，基本上，咱們都須要手寫不少組件的標籤，這裏咱們提供全部的組件庫輸入提示，以方便程序編寫中的效率。git

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中自定義，方便本身的開發。github

自定義輸入提示

我首先把自定義輸入提示的教程放出來：
首先 Shift+Command+P，打開命令輸入框，輸入snippet，點擊首選項：配置用戶代碼片斷typescript

因爲我是用來作vue文件的輸入提示，系統中並無默認的配置項，咱們能夠經過新建的方式建立配置項。json

建立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"
        }
    ]
}

複製代碼