Edit

扩展剖析

在上一主题中，您已经能够运行一个基本的扩展。它是如何工作的呢？

Hello World 扩展做了3件事：

Registers the onCommand Activation Event: onCommand:helloworld.helloWorld, so the extension becomes activated when user runs the Hello World command.

注意： 从 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中编写扩展至关重要：

Activation Events: 您的扩展程序变为活动状态的事件。
贡献点: 你在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

您可以阅读更多关于配置文件的信息：

launch.json 用于配置 VS Code 的调试
tasks.json 用于定义 VS Code Tasks
tsconfig.json 参考 TypeScript Handbook

然而，让我们专注于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 使用 . 作为扩展的唯一 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() {}

12/11/2024