🚀 在 VS Code 中！

擴充功能剖析

在上一個主題中，您已能夠讓基本擴充功能執行。它在底層是如何運作的呢？

Hello World 擴充功能執行 3 件事

  • 註冊 onCommand 啟動事件：onCommand:helloworld.helloWorld，因此當使用者執行 Hello World 命令時，擴充功能會被啟動。

    注意： 從 VS Code 1.74.0 開始，在 package.json 的 commands 區段中宣告的命令在被叫用時會自動啟動擴充功能，而無需在 activationEvents 中明確加入 onCommand 項目。

  • 使用 contributes.commands 貢獻點，使 Hello World 命令在命令面板中可用，並將其繫結至命令 ID helloworld.helloWorld。
  • 使用 commands.registerCommand VS Code API，將函式繫結至已註冊的命令 ID helloworld.helloWorld。

理解這三個概念對於在 VS Code 中編寫擴充功能至關重要

一般來說，您的擴充功能會結合使用貢獻點和 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

您可以閱讀更多關於組態檔的資訊

  • launch.json 用於組態 VS Code 偵錯
  • tasks.json 用於定義 VS Code 工作
  • tsconfig.json 請參閱 TypeScript 手冊

但是，讓我們專注於 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() {}
02/06/2025