vscode 外掛配置指北

junior發表於2020-11-09
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 的右鍵選單。效果如下：
uploading-image-819282.png

完整程式碼見 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，
    vscode 外掛配置指北

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

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

相關文章