创建插件#

1
yo code

生成器会询问以下问题：

1
- **选择扩展类型**：例如“New Extension (TypeScript)”或者“New Extension (JavaScript)”。
2
- **扩展名称、描述**：根据提示填写想要的扩展名称和描述信息。
3
- **Git 初始化**：是否初始化 Git 仓库。
4
- **包管理器**：选择使用 npm 或 yarn。

生成完成后，会得到一个初步搭建好的项目结构。

理解结构#

打开生成的项目，会看到一些重要的文件和目录：

• package.json

  这个文件定义了扩展的基本信息、依赖以及 VSCode 的激活事件和命令注册。

  例如：

  1
  {
  2
    "name": "my-sample-extension",
  3
    "displayName": "My Sample Extension",
  4
    "description": "A simple VSCode extension.",
  5
    "version": "0.0.1",
  6
    "engines": {
  7
      "vscode": "^1.60.0"
  8
    },
  9
    "activationEvents": [
  10
      "onCommand:extension.helloWorld"
  11
    ],
  12
    "main": "./out/extension.js",
  13
    "contributes": {
  14
      "commands": [
  15
        {
  16
          "command": "extension.helloWorld",
  17
          "title": "Hello World"
  18
        }
  19
      ]
  20
    },
  21
    "scripts": {
  22
      "vscode:prepublish": "npm run compile",
  23
      "compile": "tsc -p ./"
  24
    },
  25
    "devDependencies": {
  26
      "typescript": "^4.0.0",
  27
      "vscode": "^1.1.37",
  28
      "@types/node": "^12.0.0"
  29
    }
  30
  }

• src/extension.ts****（或 extension.js****）

  这是扩展的入口文件，当扩展被激活时会运行这里的代码。

  例如，一个简单的示例：

  1
  import * as vscode from 'vscode';
  2
  
  3
  export function activate(context: vscode.ExtensionContext) {
  4
      console.log('Congratulations, your extension "my-sample-extension" is now active!');
  5
  
  6
      let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
  7
          vscode.window.showInformationMessage('Hello World from your VSCode extension!');
  8
      });
  9
  
  10
      context.subscriptions.push(disposable);
  11
  }
  12
  
  13
  export function deactivate() {}

运行和调试#

• 打开项目后，在 VSCode 的调试面板中，可以看到一个 Launch Extension 的配置。
• 按下 F5，VSCode 将启动一个新的扩展开发主机（Extension Development Host）。
• 在新的窗口中，通过命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）输入注册的命令，比如输入 “Hello World” 来测试扩展是否正常工作。

发布插件#

当开发完成并测试好之后，可以考虑将插件发布到 VSCode Marketplace 供其他人使用：

• 安装 vsce 工具帮助打包和发布扩展：

  1
  npm install -g vsce

• 在项目根目录下运行打包命令：

  1
  vsce package

• 根据 官方文档 的指引，完成发布流程。

插件启动#

VSCode 扩展通过 package.json 中的 activationEvents 数组来定义何时激活扩展。以下是主要的激活事件类型：

Create Plugin#

1
yo code

The generator will ask the following questions：

1
- **Choose Extension Type**：For example “New Extension (TypeScript)” or “New Extension (JavaScript)”.
2
- **Extension name and description**：Fill in the extension name and description as prompted.
3
- **Git initialization**：Whether to initialize a Git repository.
4
- **Package manager**：Choose using npm or yarn.

After generation completes, you will have a basic project structure scaffolded.

Understanding the Structure#

Open the generated project, you will see some important files and directories:

• package.json

  This file defines the extension’s basic information, dependencies, as well as VS Code activation events and command registrations.

  For example:

  1
  {
  2
    "name": "my-sample-extension",
  3
    "displayName": "My Sample Extension",
  4
    "description": "A simple VS Code extension.",
  5
    "version": "0.0.1",
  6
    "engines": {
  7
      "vscode": "^1.60.0"
  8
    },
  9
    "activationEvents": [
  10
      "onCommand:extension.helloWorld"
  11
    ],
  12
    "main": "./out/extension.js",
  13
    "contributes": {
  14
      "commands": [
  15
        {
  16
          "command": "extension.helloWorld",
  17
          "title": "Hello World"
  18
        }
  19
      ]
  20
    },
  21
    "scripts": {
  22
      "vscode:prepublish": "npm run compile",
  23
      "compile": "tsc -p ./"
  24
    },
  25
    "devDependencies": {
  26
      "typescript": "^4.0.0",
  27
      "vscode": "^1.1.37",
  28
      "@types/node": "^12.0.0"
  29
    }
  30
  }

• src/extension.ts (or extension.js)

  This is the entry point of the extension; this code runs when the extension is activated.

  For example, a simple sample:

  1
  import * as vscode from 'vscode';
  2
  
  3
  export function activate(context: vscode.ExtensionContext) {
  4
      console.log('Congratulations, your extension "my-sample-extension" is now active!');
  5
  
  6
      let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
  7
          vscode.window.showInformationMessage('Hello World from your VS Code extension!');
  8
      });
  9
  
  10
      context.subscriptions.push(disposable);
  11
  }
  12
  
  13
  export function deactivate() {}

Run and Debug#

• After opening the project, in VS Code’s Debug panel, you will see a configuration named Launch Extension.
• Press F5; VS Code will start a new Extension Development Host.
• In the new window, via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P), run the registered command, for example typing “Hello World” to test whether the extension works properly.

Publish Extension#

When development and testing are complete, you may consider publishing the extension to the VS Code Marketplace for others to use:

• Install the vsce tool to help package and publish extensions:

  1
  npm install -g vsce

• In the project root, run the packaging command:

  1
  vsce package

• Follow the guidance in the official documentation to complete the publishing process. (Official docs: https://code.visualstudio.com/api/working-with-extensions/publishing-extension)

Extension Activation#

VS Code extensions are activated according to the activationEvents array in package.json. Here are the main activation event types：

プラグインの作成#

1
yo code

ジェネレータは以下の質問をします：

1
- **拡張機能のタイプを選択**：例えば“New Extension (TypeScript)”または“New Extension (JavaScript)”。
2
- **拡張機能の名称と説明**：表示に従って、作成したい拡張機能の名称と説明を入力します。
3
- **Git の初期化**：Git リポジトリを初期化するかどうか。
4
- **パッケージマネージャー**：npm または yarn の使用を選択します。

生成が完了すると、初期設定済みのプロジェクト構造が得られます。

構造の理解#

生成したプロジェクトを開くと、重要なファイルとディレクトリがいくつか表示されます：

• package.json

  このファイルには拡張機能の基本情報、依存関係、そして VSCode のアクティベーションイベントとコマンド登録が定義されています。

  例えば：

  1
  {
  2
    "name": "my-sample-extension",
  3
    "displayName": "My Sample Extension",
  4
    "description": "A simple VSCode extension.",
  5
    "version": "0.0.1",
  6
    "engines": {
  7
      "vscode": "^1.60.0"
  8
    },
  9
    "activationEvents": [
  10
      "onCommand:extension.helloWorld"
  11
    ],
  12
    "main": "./out/extension.js",
  13
    "contributes": {
  14
      "commands": [
  15
        {
  16
          "command": "extension.helloWorld",
  17
          "title": "Hello World"
  18
        }
  19
      ]
  20
    },
  21
    "scripts": {
  22
      "vscode:prepublish": "npm run compile",
  23
      "compile": "tsc -p ./"
  24
    },
  25
    "devDependencies": {
  26
      "typescript": "^4.0.0",
  27
      "vscode": "^1.1.37",
  28
      "@types/node": "^12.0.0"
  29
    }
  30
  }

• src/extension.ts（または extension.js）

  これは拡張機能のエントリポイントです。拡張機能がアクティブ化されると、ここのコードが実行されます。

  例えば、簡単な例：

  1
  import * as vscode from 'vscode';
  2
  
  3
  export function activate(context: vscode.ExtensionContext) {
  4
      console.log('Congratulations, your extension "my-sample-extension" is now active!');
  5
  
  6
      let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
  7
          vscode.window.showInformationMessage('Hello World from your VSCode extension!');
  8
      });
  9
  
  10
      context.subscriptions.push(disposable);
  11
  }
  12
  
  13
  export function deactivate() {}

実行とデバッグ#

• プロジェクトを開くと、VSCode のデバッグパネルに、Launch Extension の設定が表示されます。
• F5 を押すと、VSCode は新しい拡張機能開発ホスト（Extension Development Host）を起動します。
• 新しいウィンドウで、コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）を使って、登録済みのコマンドを入力します。例えば “Hello World” と入力して拡張機能が正しく動作するかをテストします。

プラグインの公開#

開発が完了し、テストが済んだら、他の人に使ってもらうために VSCode Marketplace に公開することを検討できます：

• 拡張機能のパッケージ化と公開を支援する vsce ツールをインストールします：

  1
  npm install -g vsce

• プロジェクトのルートディレクトリでパッケージ化コマンドを実行します：

  1
  vsce package

• 公式ドキュメント の指示に従い、公開手順を完了します。

プラグインの起動#

VSCode の拡張機能は package.json の activationEvents 配列を通じて、いつ有効化するかを定義します。以下は主なアクティベーションイベントのタイプです：