vscode插件開發中文文檔教程(3)——擴展結構詳情 - 前端,javascript,typescript,vscode插件倔強青銅三博客

vscode插件開發中文文檔教程(3)——擴展結構

原文鏈接：Extension Anatomy
作者：Microsoft
譯者：倔強青銅三

前言

大家好，我是倔強青銅三。是一名熱情的軟件工程師，我熱衷於分享和傳播IT技術，致力於通過我的知識和技能推動技術交流與創新，歡迎關注我，微信公眾號：倔強青銅三。歡迎點贊、收藏、關注，一鍵三連！！！

擴展結構

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

Hello World 擴展完成了以下三件事：

註冊了 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 擴展至關重要：

激活事件: 觸發擴展激活的事件。
貢獻點: 在 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 任務
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> 作為擴展的唯一標識符。例如，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() {}

最後感謝閲讀！歡迎關注我，微信公眾號：倔強青銅三。歡迎點贊、收藏、關注，一鍵三連！！！

倔強青銅三博客

倔強青銅三博客

博客 / 詳情