從零開始開發一款屬於你的Visual Studio Code 插件

❝

視頻日期：2019年12月9日 

會議主題：微軟技術暨生態大會 2018

會議日期：2018年10月25日 

演講題目：從零開始開發一款屬於你的 Visual Studio Code 插件 

主講人：韓駿 - 微軟開發工具事業部

❞預熱部分主講人介紹

截止18年開會，主講人已經開發過 16 款 VS Code 插件，其中很多插件備受好評。比如 Code Runner 已經有 400 多萬下載量， GitHub 上收穫 1k 星標。

主講人有著很深的 VS Code 的插件開發經驗。

VS Code 介紹

Visual Studio Code 是一款微軟推出的編輯器，具有以下特點：

跨平臺（macOS, Linux, Windows）

談到 VSC 的開發，就有兩點不得不提：Electron 框架與 Monaco Editor 。

VSC 是完全基於 Electron 進行開發的。

Electron 框架具有以下特點：

基於 Node.js （作為後端）和 Chromium （作為前端）；使用 HTML 、 CSS 和 JavaScript 開發跨平臺桌面 GUI 應用程式；使用者有：Atom 、 Skype 、 GitHub Desktop 、 Slack ...

還有一個重要的組件，是 Monaco Editor 。其實， Monaco Editor 在微軟內部有很多應用。

Monaco Editor 有以下特點：

基於瀏覽器的代碼編輯器：intelliSense ，代碼驗證，語法高亮，文件比較...支持主流瀏覽器：IE 11 ， Edge ， Chrome ， Firefox ， Safari 和 Opera ；使用者：Azure DevOps ， OneDrive ， Edge Dev Tools ， Gitee Web IDE 。VSC 插件簡介

VSC 有超過 8000 個插件（截止演講的 2018 年），內容包含語言、調試器、代碼格式化、代碼片段、鍵盤映射、主題...

VSC 如此受歡迎，離不開其豐富的插件生態。

VSC 的插件開發

可以分為四個步驟：

I 設計部分

設計部分的第一個關鍵詞：「靈感」。那麼，怎樣獲取靈感？

第一點：從自身需求出發。以 Code Runner 為例：韓老師在微軟曾開發過許多語言，自己曾有過一個需求：「是否可以省去在 terminal 中進入某個目錄運行代碼這個環節，而直接運行自己所需測試的十幾行代碼片段呢？」韓老師發現並沒有相應插件，於是他開發了 Code Runner 。

第二點：去發現別人的需求，比如去 GitHub issues 或者 feature request 去發現別人的需求。比如在開發前端時，自動補全 Tag 是一個很有用的功能，但當時 VSC 並未實現，於是韓老師開發了 Auto Close Tag 插件。

第三點：查考老牌編輯器已有功能。因為 VSC 屬於新興編輯器，功能尚不完備，可以參考其他編輯器，獲取需求靈感，從而開發相應插件。

設計部分的第二個關鍵詞：「目標用戶」。

以 Code Runner 為例，其目標用戶可定位成：

初學者：初學者可能僅僅想了解語言的語法，無需了解編譯過程，因此使用 Code Runner 可以輕鬆運行代碼，省去其他編譯命令；「懶人」：Code Runner 提供了多個快捷鍵與觸發動作，大大提升調試效率；II 實現部分

首先，應該配置好開發環境，有三點關鍵步驟：

Yeoman and VS Code Extension generator

其中 Yeoman 和 generator 可從 npm 配置：

npm install -g yo generator-code
接下來，我們通過一個 Demo 來演示 VS Code 的開發。
「第一步」，確認已經安裝配置好了 Yeoman 與 VS Code Extension generator，打開 terminal ，輸入 yo code 。
「第二步」，在命令行中會供你選擇 Extension 的種類，這裡推薦大家使用基於 TypeScript 進行開發，即選擇 New Extension (TypeScript) 。
「第三步」，依照命令行中的提示，輸入名字、 ID 、description 、 Publish Name 等等。完成基礎配置後，會生成屬於你的新插件的項目文件夾，其中會配置好了 VS Code 的 Engine 。
「第四步」，使用 VSC 打開你剛剛生成的項目，如下圖。
可以注意到，（通過 sky fording ）生成了許多文件，但其實，值得注意的只有兩個文件：
在 package.json 中，關注 contributes ，其定義了一個 Command ：
"contributes": {
    "commands": [
        {
            "command": "extension.helloWorld",
            "title": "Hello World"
        }
    ]
}
同時注意：
"activationEvents": [
    "onCommand:extension.helloWorld"
	]
這裡表示，該 event 是由 command 激活的。這是出於性能的考慮，在 VSC 中，插件一般都是 lazy load 的，只有激活才啟用插件。
而 Extension.ts 可以理解為一個激活的函數。
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only be executed once when your extension is activated
	console.log('Congratulations, your extension "hello-piper" is now active!');

	// The command has been defined in the package.json file
	// Now provide the implementation of the command with registerCommand
	// The commandId parameter must match the command field in package.json
	let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
		// The code you place here will be executed every time your command is executed

		// Display a message box to the user
		vscode.window.showInformationMessage('Hello Piper!');
	});

	context.subscriptions.push(disposable);
}
當 command 出現時，上述實例會 showInformationMessage('Hello Piper!')。
「第五步」，我們嘗試調試這個插件。在左側的 Run 工具欄中點擊 debug 按鈕， VSC 會為我們打開一個加載好該插件的新 VSC 。
在新 VSC 中 Ctrl+Shift+P 輸入我們之前定義好的命令，可見有效。如下圖。
❝
以上就是建立 VSC 插件項目的過程，有經驗的開發人員可以閱讀微軟官方文檔 https://code.visualstudio.com/api 進行插件開發。
❞❝
以上為視頻前 25 分鐘內容。
❞
「第六步」，接下來韓老師現場修改 vscode-translator 插件，以此為例講解關於插件開發的更多操作。以下是詳細內容。
vscode-translator 的項目地址：https://github.com/formulahendry/vscode-translator
首先來看 package.json 。
"commands": [{
		"command": "translator.translate",
		"title": "Translate"
	},
	{
		"command": "translator.replaceWithTranslation",
		"title": "Replace with Translation"
	},
	{
		"command": "translator.toggleCaptureWord",
		"title": "Toggle - Capture Word"
	}
]
在 commands 內註冊了關於 Translate 的命令。
"menus": {
	"editor/context": [{
			"command": "translator.translate",
			"group": "navigation@1"
		},
		{
			"command": "translator.replaceWithTranslation",
			"group": "navigation@2"
		}
	]
}
在 menus 中配置相應命令，可以增加「右鍵彈出菜單命令」的效果。
"keybindings": [{
	"command": "translator.translate",
	"key": "ctrl+alt+z"
}
很多人喜歡使用鍵盤快捷鍵進行操作，鑑於此，韓老師增加了 keybindings 項。
接著我們來看 Extension.ts ，其中也是註冊 translate 的相關 Function 。
進入 Extension.ts 註冊的函數文件：translator.ts ，我們可以看到：通過 activeTextEditor 對象可以拿到當前 selection 的內容（即需要被翻譯的文本）。之後，通過 translate 函數，得到被翻譯好的文本。在當前版本中，使用的是有道 API ：
public static async translate(source: string, showErrorMessage: boolean = false): Promise<string> {
	try {
		const result = (await axios.get(`https://fanyi.youdao.com/translate?&doctype=json&type=AUTO&i=${encodeURIComponent(source)}`)).data;
		return result['translateResult'].map((translateResult: any) => translateResult.map((sentence: any) => sentence['tgt']).join('')).join('\n');
	} catch (error) {
		if (showErrorMessage) {
			vscode.window.showErrorMessage(error.toString());
		}
		return "";
	}
}
至於 hover 功能（滑鼠懸浮於文本上），這利用了 VS Code 提供的 HoverProvider 的功能。
import { Hover, HoverProvider, Position, TextDocument } from 'vscode';
export class TranslatorHoverProvider implements HoverProvider {}
「第七步」，關於發布該插件。
VS Code 提供了 VSCE ，可以很方便地發布插件。可以通過 npm 來進行安裝。
在發布前，需要進行測試。
韓老師展示了 Azure Pipelines 的全平臺測試過程（在 Windows/Mac OS/Linux 平臺測試 CI/CD ）。
使用 VSCE publish 來發布。
「第八步」，將本地項目與 Azure 配置好後，可以在 Azure 的 Application Insights 上查看用戶的下載情況與行為。
❝
以上為視頻前 39 分鐘內容， DEMO 部分結束。
❞
韓老師分享了三個 Tips ：
Tip 1：快速迭代。帕累託法則（二八定律）是指，80%的用戶往往只會用20%的功能。因此，發布第一個版本的插件時，不需要實現全部功能，就可以看出該插件的前景。
Tip 2：可以使用 VS Code Insider ，該版本每天都會更新，可以最快速地查看新功能。
Tip 3：為插件加一些快捷方式。其實插件的轉換率（使用人數除以下載數量）的很低，為插件增加快捷方式方便人員使用，可以大幅提高轉換率。
III 推广部分
推廣越早越好。
推廣渠道可以有博客論壇等等，比如 Stack Overflow ， v2ex ， 知乎等等。
IV 維護部分
首先，維護應該是數據驅動的，可以關注：
Fail Fast ， 如果插件效果不好，或許應該儘早放棄。
最後老師講了講開源與社區：老師幾乎的所有的工具都是開源的。開源是一種雙贏的模式，一個好的項目會吸引很多人 pull request 和 issue ，可以讓開發者學習很多，也可以幫助插件項目快速迭代成長。