vscode 插件配置指北

Extension Manifest

就像 chrome 插件使用 manifest.json 來管理插件的配置一樣，vscode 的插件也有一個 manifest，而且就叫 package.json，在這裏，我們可以除了可以配置插件的名字，版本號，icon 外，還可以配置插件提供哪些功能，乃至發佈所需要的信息。所有字段可以查看 官方文檔，本文只談其中幾個與開發發佈相關的字段。

Activation Events

Activation Events 是 package.json 裏的一個字段，決定了用戶安裝了一個插件之後，插件什麼時候激活，然後開始工作。比如安裝之後已啓動 vscode 就激活，可以這麼寫：

"activationEvents": [
    "*"
]

如果希望啓動完成後激活可以使用 onStartupFinished;

在打開某個類型的文件時激活，如 log 文件：

...
"activationEvents": [
    "onLanguage:log"
]
...

更多啓動事件可參考 https://code.visualstudio.com/api/references/activation-events

Contribution Points

Contribution Points 可以理解爲我們開發的插件要提供什麼能力，我們可以在多個方面來拓展 vscode，大到支持一門語言的語法高亮和 lint，小到提供一個命令或者按鈕，都在這裏定義。比如提供一個命令：

{
 "contributes": {
   "commands": [
     {
       "command": "extension.sayHello",
       "title": "Hello World", // 提供更友好的名稱
       "category": "Hello",
       "icon": {
         "light": "path/to/light/icon.svg",
         "dark": "path/to/dark/icon.svg"
       }
     }
   ]
 }
}

爲了實現 extension.sayHello，我們在 extension.ts 通過 commands.registerCommand 來實現這個命令：

vscode.commands.registerCommand('extension.sayHello',() => {
	console.log('hello world');
   vscode.window.showInformationMessage('hello!')
})
	

這樣當我們 ctrl+shift+p 並輸入 sayHello 時，就會執行插件 sayHello 對應的函數。

我們還可以在右鍵菜單中插入一個選項：

"menus": {
      "explorer/context": [
        {
          "when": "resourceScheme == file",
          "command": "extension.base64",
          "group": "base64"
        }
      ]
    }

上面 這個 json 表示在 vscode 的文件管理器中，添加一個將文件轉換成 base64 的右鍵菜單。效果如下：

完整代碼見 img2base64，所有的 contribute point 見 https://code.visualstudio.com/api/references/contribution-points

發佈可能會遇到的問題

發佈主要是用到 vsce 這個工具進行發佈。主要會用到幾個命令:

vsce create-publisher (publisher name) #創建一個publisher
vsce login (publisher name) # 使用publisher name登錄
$ cd myExtension
$ vsce package
# myExtension.vsix generated
$ vsce publish
# <publisherID>.myExtension published to VS Code MarketPlace

然後建議先完整看一遍官方的發佈到插件市場的 教程。需要注意的地方是在生成 token 的時候，需要嚴格按照文檔來操作，如果後續發佈時遇到的登錄報 401 的問題，請參考下面的鏈接。

• engines

用於標記插件所需的最低版本，如果沒有使用很新的 api，建議還是往下設幾個版本，以支持不是最新的 vscode，如果沒有使用不兼容的 api, 設成 * 也可以

	"engines": {
		"vscode": "*"
	}

• token 401 問題
  確保你的 token 生成時 orgnization 選的是 All accessiable orgnizations，
  

https://github.com/microsoft/vscode-vsce/issues/11

• publisher 問題
  https://segmentfault.com/a/1190000017279102

• logo，給自己的插件做一個 logo 吧，使用下面這個開源的工具，可以很快做出一個炫酷的logo
  https://www.logoly.pro/#/

希望本文可以幫助大家少踩些坑（完）