vscode外掛開發實踐與demo原始碼

VSCode · 發表 2019-02-13 18:26:13

摘要：工欲善其事必先利其器。vscode作為優秀的開發工具，給我的日常開發工作提供了極大的便利。其拓展機制更是如此。但是，最近在做年度專業線任務時，有需要用到漂亮的行尾註釋對齊，搜尋後發現vscode官方外掛市場沒有我想要的。於是便想著自己來開發這麼個東西，一方面方便後邊自己使用，一方面...

工欲善其事必先利其器。vscode作為優秀的開發工具，給我的日常開發工作提供了極大的便利。其拓展機制更是如此。

但是，最近在做年度專業線任務時，有需要用到漂亮的行尾註釋對齊，搜尋後發現vscode官方外掛市場沒有我想要的。

於是便想著自己來開發這麼個東西，一方面方便後邊自己使用，一方面也能學習下vscode的外掛開發、釋出方法，另一方面要是釋出後對其他人有所幫助就更好了。

本文主要內容

這篇文章是在我完成外掛開發、釋出後寫的，記錄下方法。

主要包含兩個方面的內容：

vscode外掛開發、釋出主要流程
vscode外掛demo原始碼參考 github.com/gitshan/vsc…

vscode外掛開發、釋出主要流程

外掛開發前的準備：vscode、nodejs、vscode外掛生產工具、git、微軟賬號
外掛開發：外掛構思、官方文件查閱
外掛釋出：打包、上傳、外掛市場操作
外掛維護：更新迭代後打包、上傳、外掛市場操作

外掛開發前的準備：

vscode、nodejs、git、微軟賬號，這個的準備無需多說。

vscode外掛生產工具：官方推薦使用Yeoman 和 VS Code Extension Generator。用如下命令安裝：

npm install -g yo generator-code

至此開發所需的準備已做好。

外掛開發

使用生產工具初始化程式碼

執行如下指令

yo code

結果如下：

$ yo code

_-----_╭──────────────────────────╮
||│Welcome to the Visual│
|--(o)--|│Studio Code Extension│
`---------´│generator!│
( _´U`_ )╰──────────────────────────╯
/___A___\/
|~|
__'.___.'__
 ´`|° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
(Move up and down to reveal more choices)
複製程式碼

在os系統上通過上下鍵來選擇要建立的型別，在win上輸入1、2、3後按回車來選擇。

其餘步驟根據提示即可。得到如下結構目錄結構：

├── .vscode// 資源配置檔案
├── CHANGELOG.md // 更改記錄檔案，會展示到vscode外掛市場
├── extension.js // 拓展原始碼檔案
├── jsconfig.json
├── package.json // 資源配置檔案
├── README.md// 外掛介紹檔案，會展示到vscode外掛市場
├── test// 測試檔案
└── vsc-extension-quickstart.md
複製程式碼

ps：其餘專案型別的文件目錄可能會有所差別，以生成的檔案目錄為準。在js拓展專案下，最重要的就是 extension.js 和 package.json 。

外掛構思

靈感來源於生活、工作，這個想到了就可以去做。比如我這個行尾註釋對齊（上面的目錄註釋就是用的我剛開發好的外掛）。

關於comment-aligner的具體思路就不寫在這裡了，感興趣的可以去下載原始碼看看，裡邊包含了完整的註釋。邏輯十分簡單。

查閱文件開發

這裡不得不說一下官方文件不太好看，至少不是那麼友好。傳送門 code.visualstudio.com/api/referen… 。英文實在吃力的可以使用chrome的一鍵翻譯，翻譯的還算準確的。

對於基本的應用主要檢視 window 相關的就足夠了，結合 yo code 生成的基本程式碼可以實現簡單的功能。

外掛釋出

安裝打包、釋出工具

npm install -g vsce

建立釋出人

在外掛市場官網建立釋出人

完善 `package.json`

package.json 中有vscode的自定義配置，在執行打包命令時vscode會自檢，如果配置錯誤或者遺漏會有提示資訊。

較完整的資訊如下（下方是我釋出的comment aligner的package.json檔案）：

{
"name": "comment-aligner",
"displayName": "comment aligner",
"description": "A tool for aligning the inline trailing comment",
"version": "1.0.1",
"publisher": "huangbaoshan", // 釋出人，在外掛市場官網建立的釋出人id
"icon": "icon/icon.png",// 外掛圖示，用於在外掛市場展示的icon；可以放到同級目錄內，打包會帶入
"repository": {
"type": "git",
"url":"https://github.com/gitshan/vscode-extension-comment-aligner.git"
},
"engines": {
"vscode": "^1.30.0"// vscode版本號
},
"categories": [
"Other"// vscode外掛類別，會在外掛市場的對應類別中展示
],
"activationEvents": [
"onCommand:extension.commentaligner"
],
"main": "./extension.js",
"contributes": {
"commands": [{
"command": "extension.commentaligner", // 外掛註冊的類名
"title": "Comment Aligner"// 外掛在命令麵包的展示名稱
}]
},
"scripts": {
"postinstall": "node ./node_modules/vscode/bin/install",
"test": "node ./node_modules/vscode/bin/test"
},
"devDependencies": {
"typescript": "^3.1.4",
"vscode": "^1.1.25",
"eslint": "^4.11.0",
"@types/node": "^8.10.25",
"@types/mocha": "^2.2.42"
}
}
複製程式碼

打包

執行如下命令：

vsce package

在根目錄得到： comment-aligner-1.0.1.vsix 檔案