擴充套件剖析
在上一個主題中，您已經成功運行了一個基本的擴充套件。它是如何工作的呢？
Hello World 擴充套件做了 3 件事
- 註冊了
onCommand啟用事件:onCommand:helloworld.helloWorld，這樣當用戶執行Hello World命令時，擴充套件就會被啟用。注意： 從 VS Code 1.74.0 開始，在
package.json的commands部分宣告的命令在被呼叫時會自動啟用擴充套件，無需在activationEvents中顯式指定onCommand條目。 - 使用
contributes.commands貢獻點 將Hello World命令新增到命令面板中，並將其繫結到命令 IDhelloworld.helloWorld。 - 使用
commands.registerCommandVS Code API 將一個函式繫結到已註冊的命令 IDhelloworld.helloWorld。
理解這三個概念對於編寫 VS Code 擴充套件至關重要
- 啟用事件：您的擴充套件啟用時會觸發的事件。
- 貢獻點：您在
package.json擴充套件清單 中進行的靜態宣告，用於擴充套件 VS Code 的功能。 - VS Code API：您可以在擴充套件程式碼中呼叫的 JavaScript API 集合。
通常情況下，您的擴充套件會結合使用貢獻點和 VS Code API 來擴充套件 VS Code 的功能。 擴充套件能力概述 主題將幫助您為擴充套件找到合適的貢獻點和 VS Code API。
讓我們仔細看看 Hello World 示例的原始碼，瞭解這些概念如何應用於其中。
擴充套件檔案結構
.
├── .vscode
│ ├── launch.json // Config for launching and debugging the extension
│ └── tasks.json // Config for build task that compiles TypeScript
├── .gitignore // Ignore build output and node_modules
├── README.md // Readable description of your extension's functionality
├── src
│ └── extension.ts // Extension source code
├── package.json // Extension manifest
├── tsconfig.json // TypeScript configuration
您可以閱讀更多關於配置檔案資訊
然而，讓我們專注於 package.json 和 extension.ts，它們對於理解 Hello World 擴充套件至關重要。
擴充套件清單
每個 VS Code 擴充套件都必須有一個 package.json 作為其 擴充套件清單。package.json 包含 Node.js 欄位（如 scripts 和 devDependencies）以及 VS Code 特定的欄位（如 publisher、activationEvents 和 contributes）。您可以在 擴充套件清單參考 中找到所有 VS Code 特定欄位的描述。以下是一些最重要的欄位：
name和publisher：VS Code 使用<publisher>.<name>作為擴充套件的唯一 ID。例如，Hello World 示例的 ID 是vscode-samples.helloworld-sample。VS Code 使用此 ID 來唯一標識您的擴充套件。main：擴充套件的入口點。activationEvents和contributes： 啟用事件 和 貢獻點。engines.vscode：這指定了擴充套件所依賴的 VS Code API 的最低版本。
{
"name": "helloworld-sample",
"displayName": "helloworld-sample",
"description": "HelloWorld example for VS Code",
"version": "0.0.1",
"publisher": "vscode-samples",
"repository": "https://github.com/microsoft/vscode-extension-samples/helloworld-sample",
"engines": {
"vscode": "^1.51.0"
},
"categories": ["Other"],
"activationEvents": [],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "helloworld.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./"
},
"devDependencies": {
"@types/node": "^8.10.25",
"@types/vscode": "^1.51.0",
"tslint": "^5.16.0",
"typescript": "^3.4.5"
}
}
注意：如果您的擴充套件針對的是 1.74 之前的 VS Code 版本，則必須在
activationEvents中顯式列出onCommand:helloworld.helloWorld。
擴充套件入口檔案
擴充套件入口檔案匯出兩個函式：activate 和 deactivate。activate 在您註冊的啟用事件發生時執行。deactivate 允許您在擴充套件被停用之前進行清理。對於許多擴充套件，可能不需要顯式清理，可以刪除 deactivate 方法。但是，如果擴充套件需要在 VS Code 關閉、擴充套件被停用或解除安裝時執行操作，則可以使用此方法。
VS Code 擴充套件 API 在 @types/vscode 型別定義中宣告。vscode 型別定義的版本由 package.json 的 engines.vscode 欄位值控制。vscode 型別為您在程式碼中提供 IntelliSense、轉到定義等 TypeScript 語言功能。
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// 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 "helloworld-sample" 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('helloworld.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 World!');
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate() {}