拡張機能の作成#

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 配列によって、拡張機能をアクティブ化するタイミングを定義します。主なアクティベーションイベントの種類は以下のとおりです：

1
- VSCode の起動時に拡張機能を即座にアクティブ化します

1
- メリット：拡張機能を常に利用できます
2
- デメリット：VSCode の起動パフォーマンスに影響するため、本番環境での使用は推奨されません