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，小到提供一個命令或者按鈕，都在這里定義。我們以著名的 vetur 插件為例：

再比如我們的插件只是提供一個命令：

{
 "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，但是不能設置成*

	"engines": {
		"vscode": "*" // error
	}

在修改engines字段后，也要保證依賴的@types/vscode與之對應:

	"engines": {
		"vscode": "^1.20.0" // ok
	}
    
    ...
    
	"devDependencies": {
		"@types/vscode": "^1.20.0", //與上面一致

• 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/#/

• 官方例子： https://github.com/microsoft/vscode-extension-samples

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