VSCodeの拡張機能を開発する方法について

VSCodeの拡張機能とは、Visual Studio Codeに新しい機能を追加するためのプログラムです。

正式には「Visual Studio Code Extension」と呼ばれ、VS Codeが提供するExtension APIを利用して開発します。

拡張機能を利用すると、VS Codeに独自のコマンドを追加したり、エディターの文字列を操作したり、コード補完やLint、フォーマット機能などを実装したりできます。

たとえば、次のような機能を作成できます。

• 独自コマンドの追加
• 右クリックメニューの追加
• キーボードショートカットの追加
• コード補完
• Hover情報の表示
• コードフォーマット
• Lint機能
• スニペット
• ステータスバー
• サイドバー
• Tree View
• Webview
• カラーテーマ
• アイコンテーマ
• 独自言語サポート
• デバッグ機能
• Notebook関連機能

小さな作業自動化ツールから、本格的な開発支援ツールまで幅広く作成できるのがVSCode拡張機能の特徴です。

VSCode拡張機能の開発に必要なもの

VSCode拡張機能を開発する場合は、まず開発環境を準備します。

Visual Studio Code

基本的な開発環境としてVisual Studio Codeを使用します。

開発中の拡張機能は、通常利用しているVS Codeそのものではなく、「Extension Development Host」という別のVS Codeウィンドウで実行できます。

そのため、普段使用している環境への影響を抑えながら拡張機能をテストできます。

Node.js

一般的なVSCode拡張機能の開発ではNode.jsを使用します。

Node.jsをインストールすると、パッケージ管理ツールであるnpmも利用できるようになります。

インストールされているか確認する場合は、ターミナルで次のコマンドを実行します。

node --version
npm --version

バージョン番号が表示されれば利用できます。

ただし、ブラウザ版VS Codeなどで動作するWeb Extensionでは、通常のNode.js拡張機能とは実行環境が異なります。

Web ExtensionではNode.js固有のAPIを自由に使用できないため、対応する場合は設計段階から注意が必要です。

Git

VS Code公式の拡張機能チュートリアルでは、Node.jsとあわせてGitのインストールも案内されています。

確認する場合は次のコマンドを使用します。

git --version

ただし、GitそのものがVS Code Extension APIを利用するための必須要件というわけではありません。

ローカルで簡単な拡張機能を作成して動作確認するだけであれば、Gitを使用しなくても開発できます。

TypeScript

VSCode拡張機能はJavaScriptでも開発できますが、基本的にはTypeScriptがおすすめです。

VS Code APIには型情報が用意されているため、TypeScriptを利用すると入力補完や型チェックを活用できます。

特にVS Code APIを多数利用する拡張機能では、TypeScriptを採用するメリットが大きくなります。

VSCode拡張機能のプロジェクトを作成する

VSCode拡張機能は手作業でも作成できますが、最初は公式で案内されているVS Code Extension Generatorを利用すると簡単です。

Yeomanとgenerator-codeを利用する

VS Code Extension Generatorは、Yeomanというプロジェクト生成ツールから利用できます。

毎回グローバルインストールしたくない場合は、次のコマンドを実行できます。

npx --package yo --package generator-code -- yo code

頻繁に使用する場合はグローバルインストールすることもできます。

npm install --global yo generator-code

インストール後は次のように実行します。

yo code

TypeScriptの拡張機能を選択する

Generatorを実行すると、作成する拡張機能の種類を対話形式で選択できます。

一般的な拡張機能を作成する場合は、次のようなTypeScript形式を選択すると分かりやすいでしょう。

New Extension (TypeScript)

続いて、拡張機能名や識別子などを設定します。

たとえば次のように指定します。

What's the name of your extension?
My Extension

What's the identifier of your extension?
my-extension

Generatorのバージョンによっては、bundlerやパッケージマネージャーなどについても質問されます。

そのため、表示される質問項目が古いチュートリアルと完全には一致しない場合があります。

VSCode拡張機能の基本的なファイル構成

TypeScriptで一般的なプロジェクトを作成すると、おおむね次のような構成になります。

my-extension/
├─ .vscode/
│  ├─ launch.json
│  └─ tasks.json
├─ src/
│  ├─ extension.ts
│  └─ test/
├─ .gitignore
├─ .vscodeignore
├─ package.json
├─ tsconfig.json
├─ README.md
└─ CHANGELOG.md

実際の構成はGeneratorのバージョンやbundler、テスト方式などによって異なる場合があります。

その中でも特に重要なのが、package.jsonとextension.tsです。

package.jsonの役割

VSCode拡張機能では、package.jsonがExtension Manifestとして利用されます。

通常のNode.jsプロジェクトと同じように名前やバージョンを記述するだけでなく、VS Codeへ追加する機能についても設定します。

基本的な設定例

たとえば、次のような内容になります。

{
  "name": "my-extension",
  "displayName": "My Extension",
  "description": "My first VS Code extension",
  "publisher": "my-publisher",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.100.0"
  },
  "categories": [
    "Other"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-extension.hello",
        "title": "Hello"
      }
    ]
  }
}

name

nameには拡張機能の内部的な名前を設定します。

"name": "my-extension"

公開する場合はMarketplace上の拡張機能識別にも関係するため、分かりやすい名前にしておきます。

displayName

displayNameはユーザーに表示される拡張機能名です。

"displayName": "My Extension"

内部名よりも、人が見て理解しやすい名前を設定できます。

publisher

Marketplaceへ公開する拡張機能では、Publisherを指定します。

"publisher": "my-publisher"

Publisherは、VS Code Marketplaceで拡張機能を公開する際に重要になります。

engines.vscode

engines.vscodeでは、対応するVS Codeのバージョンを指定します。

"engines": {
  "vscode": "^1.100.0"
}

どのバージョンを指定するかによって、その拡張機能を利用できるVS Codeの範囲が変わります。

main

mainには、拡張機能として実行されるJavaScriptファイルを指定します。

"main": "./out/extension.js"

ただし、このパスは固定ではありません。

bundlerやビルド方式によっては、distなど別のディレクトリが使用されることがあります。

そのため、mainは「ビルド後の拡張機能のエントリーポイントを指定する設定」と理解するとよいでしょう。

contributesとは

contributesは、VS Codeにどのような機能を追加するのかを宣言する項目です。

コマンドを追加する

たとえばコマンドを追加する場合は次のようにします。

"contributes": {
  "commands": [
    {
      "command": "my-extension.hello",
      "title": "Hello"
    }
  ]
}

この設定によって、「Hello」というコマンドをVS Codeのコマンドパレットなどへ表示できます。

contributesで追加できる主な機能

contributesでは、コマンド以外にもさまざまな機能を登録できます。

代表的なものは次のとおりです。

commands
menus
keybindings
configuration
views
languages
themes
snippets
debuggers
grammars

拡張機能開発では、このContribution Pointsを理解することが非常に重要です。

extension.tsの役割

VSCode拡張機能の処理を実装する中心的なファイルが、通常はsrc/extension.tsです。

たとえば次のように記述します。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand(
        'my-extension.hello',
        () => {
            vscode.window.showInformationMessage('Hello VS Code!');
        }
    );

    context.subscriptions.push(disposable);
}

export function deactivate() {}

activate関数とは

拡張機能が有効化されたときに実行される

activate()は、VS Codeが拡張機能を有効化した際に呼び出される関数です。

export function activate(context: vscode.ExtensionContext) {
}

通常はこの中で、コマンドやイベントリスナー、Providerなどを登録します。

deactivate関数

必要に応じてdeactivate()も定義できます。

export function deactivate() {}

これは拡張機能が終了するときにクリーンアップ処理を行うための関数です。

ただし、多くのDisposableをcontext.subscriptionsへ登録している場合は、VS Code側で適切に破棄されます。

context.subscriptionsとは

VS Code APIでは、コマンド登録やイベント登録などによってDisposableオブジェクトが返されることがあります。

それらを次のように登録します。

context.subscriptions.push(disposable);

これにより、拡張機能の終了時にVS Code側で適切に破棄されます。

そのため、次のような書き方もよく使われます。

context.subscriptions.push(
    vscode.commands.registerCommand(
        'my-extension.hello',
        () => {
            vscode.window.showInformationMessage('Hello!');
        }
    )
);

VSCodeにコマンドを追加する

VSCode拡張機能の基本的な機能のひとつが、独自コマンドの追加です。

registerCommandを利用する

コマンドを実装する場合は、vscode.commands.registerCommand()を使用します。

const disposable = vscode.commands.registerCommand(
    'my-extension.hello',
    () => {
        vscode.window.showInformationMessage('Hello!');
    }
);

ここでは、

my-extension.hello

というコマンドIDに対して処理を登録しています。

package.jsonのcontributes.commandsで宣言したコマンドIDと同じものを使用します。

作成した拡張機能を実行する

拡張機能を作成したら、VS Codeからすぐに実行できます。

F5キーで起動する

プロジェクトをVS Codeで開きます。

code .

その状態でF5キーを押します。

すると、新しいVS Codeウィンドウが起動します。

このウィンドウがExtension Development Hostです。

コマンドパレットから実行する

Extension Development Hostでコマンドパレットを開きます。

WindowsやLinuxでは次のキーです。

Ctrl + Shift + P

macOSでは次のキーです。

Command + Shift + P

登録したコマンド名を検索して実行します。

たとえば「Hello」を実行すると、

Hello VS Code!

という通知が表示されます。

ここまでできれば、VSCode拡張機能を開発して実行する基本環境は完成です。

Activation Eventsとは

Activation Eventsは、「どのタイミングで拡張機能を有効化するか」を決める仕組みです。

代表的なActivation Eventには次のようなものがあります。

onCommand
onLanguage
onView
onDebug
workspaceContains
onStartupFinished

onLanguage

特定の言語ファイルを使用したときに有効化する場合は、次のように指定できます。

"activationEvents": [
  "onLanguage:python"
]

onCommand

特定のコマンドが実行されたときに有効化する方法です。

"activationEvents": [
  "onCommand:my-extension.hello"
]

ただし、現在のVS Codeでは重要な仕様があります。

VS Code 1.74以降では、contributes.commandsで登録したコマンドについて、対応するonCommandを必ずしも明示的に書く必要はありません。

同様に、一部のContribution PointsについてはVS Codeが必要なActivation Eventを自動的に判断できます。

そのため、古い記事に記載されているactivationEventsをそのままコピーする必要はない場合があります。

activationEventsの「*」は慎重に使用する

Activation Eventには次のような指定もあります。

"activationEvents": [
  "*"
]

これはVS Code起動時に拡張機能を有効化する指定です。

しかし、すべての拡張機能が起動直後から動作すると、VS Code全体の起動パフォーマンスへ悪影響を与える可能性があります。

そのため、可能な限り、

onCommand
onLanguage
onView
workspaceContains

など、必要になったタイミングで有効化する仕組みを利用する方がよいでしょう。

onStartupFinishedを利用する

VS Codeの起動後に処理したい場合は、onStartupFinishedも検討できます。

"activationEvents": [
  "onStartupFinished"
]

VS Code起動直後から処理する必要がない機能であれば、*より適している場合があります。

VS Code APIを利用する

VSCode拡張機能では、次のようにVS Code APIを読み込みます。

import * as vscode from 'vscode';

このvscodeオブジェクトを通じて、エディターやワークスペース、設定、UIなどを操作できます。

メッセージを表示する

情報メッセージ

vscode.window.showInformationMessage(
    '処理が完了しました'
);

警告メッセージ

vscode.window.showWarningMessage(
    '注意してください'
);

エラーメッセージ

vscode.window.showErrorMessage(
    'エラーが発生しました'
);

ユーザーへ簡単な通知を表示したい場合に利用できます。

現在開いているエディターを取得する

現在アクティブになっているエディターは次のように取得できます。

const editor = vscode.window.activeTextEditor;

if (!editor) {
    return;
}

テキスト編集系の拡張機能では特に頻繁に利用します。

選択中の文字列を取得する

エディターで選択されている文字列は次のように取得できます。

const editor = vscode.window.activeTextEditor;

if (!editor) {
    return;
}

const selection = editor.selection;

const text = editor.document.getText(selection);

vscode.window.showInformationMessage(text);

この仕組みを利用すると、選択したテキストを変換したり解析したりする拡張機能を作成できます。

選択した文字列を大文字へ変換する拡張機能

簡単な実用例として、選択した文字列を大文字へ変換するコマンドを作成します。

extension.tsを実装する

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand(
        'my-extension.uppercase',
        async () => {
            const editor = vscode.window.activeTextEditor;

            if (!editor) {
                vscode.window.showWarningMessage(
                    'エディターが開かれていません'
                );
                return;
            }

            const selection = editor.selection;

            const text = editor.document.getText(selection);

            if (!text) {
                vscode.window.showWarningMessage(
                    '文字列を選択してください'
                );
                return;
            }

            await editor.edit(editBuilder => {
                editBuilder.replace(
                    selection,
                    text.toUpperCase()
                );
            });
        }
    );

    context.subscriptions.push(disposable);
}

export function deactivate() {}

package.jsonへコマンドを登録する

続いて、package.jsonへコマンドを追加します。

"contributes": {
  "commands": [
    {
      "command": "my-extension.uppercase",
      "title": "選択文字列を大文字に変換"
    }
  ]
}

F5でExtension Development Hostを起動し、

hello world

を選択してコマンドを実行すると、

HELLO WORLD

へ変換されます。

右クリックメニューへコマンドを追加する

コマンドはコマンドパレットだけでなく、エディターの右クリックメニューにも追加できます。

editor/contextを利用する

"contributes": {
  "commands": [
    {
      "command": "my-extension.uppercase",
      "title": "大文字に変換"
    }
  ],
  "menus": {
    "editor/context": [
      {
        "command": "my-extension.uppercase",
        "when": "editorHasSelection"
      }
    ]
  }
}

editor/contextは、エディターのコンテキストメニューを意味します。

また、

"when": "editorHasSelection"

と設定することで、文字列が選択されている場合だけコマンドを表示できます。

キーボードショートカットを追加する

拡張機能独自のキーボードショートカットも定義できます。

keybindingsを設定する

"contributes": {
  "keybindings": [
    {
      "command": "my-extension.uppercase",
      "key": "ctrl+alt+u",
      "mac": "cmd+alt+u",
      "when": "editorTextFocus"
    }
  ]
}

これにより、コマンドパレットを開かなくてもショートカットから機能を実行できます。

既存のVS Codeショートカットや他の拡張機能と競合しないキーを選ぶことも重要です。

拡張機能独自の設定項目を追加する

VS Codeの設定画面へ、拡張機能独自の設定項目を追加できます。

configurationを設定する

"contributes": {
  "configuration": {
    "title": "My Extension",
    "properties": {
      "myExtension.enabled": {
        "type": "boolean",
        "default": true,
        "description": "機能を有効にします"
      }
    }
  }
}

TypeScriptから設定を取得する

設定値は次のように取得できます。

const config =
    vscode.workspace.getConfiguration('myExtension');

const enabled =
    config.get<boolean>('enabled');

ユーザーごとに動作を変更できる拡張機能を作る場合に便利です。

ステータスバーへ情報を表示する

VS Code画面下部のステータスバーへ情報を表示することもできます。

const statusBarItem =
    vscode.window.createStatusBarItem(
        vscode.StatusBarAlignment.Right,
        100
    );

statusBarItem.text = '$(check) My Extension';

statusBarItem.command =
    'my-extension.hello';

statusBarItem.show();

context.subscriptions.push(statusBarItem);

ステータス表示だけでなく、クリックしてコマンドを実行するUIとしても利用できます。

Webviewを利用する

VS Code標準UIだけでは実現しにくい画面を作成する場合は、Webviewを利用できます。

WebviewではHTML、CSS、JavaScriptを利用した独自UIをVS Code内に表示できます。

Webviewの基本例

const panel =
    vscode.window.createWebviewPanel(
        'myWebview',
        'My Webview',
        vscode.ViewColumn.One,
        {}
    );

panel.webview.html = `
<!DOCTYPE html>
<html>
<body>
    <h1>Hello Webview</h1>
</body>
</html>
`;

ダッシュボードや設定画面、プレビュー画面などを作成する際に便利です。

ただしWebviewは通常のWebページに近い仕組みを持つため、セキュリティ対策も重要です。

外部データやユーザー入力をHTMLへ埋め込む場合は、適切なエスケープやサニタイズを行う必要があります。

また、Content Security Policyの設定も検討する必要があります。

標準のVS Code APIだけで実装できる場合は、無理にWebviewを使用せず標準UIを優先する方が管理しやすくなります。

VSCode拡張機能をデバッグする

VSCode拡張機能は、通常のアプリケーションと同じようにVS Codeからデバッグできます。

ブレークポイントを設定する

extension.tsの行番号付近をクリックしてブレークポイントを設定します。

その状態でF5を押し、Extension Development Hostを起動します。

対象のコマンドを実行すると、設定したブレークポイントで処理が停止します。

VS Codeの、

Variables
Watch
Call Stack
Debug Console

などを利用して変数の内容や処理の流れを確認できます。

console.logを利用する

簡単な確認であれば、console.log()も利用できます。

console.log('command executed');

デバッグコンソールなどから出力を確認できます。

Output Channelを利用する

実用的な拡張機能では、専用のOutput Channelを作成するとログを確認しやすくなります。

const output =
    vscode.window.createOutputChannel('My Extension');

output.appendLine('Extension activated');

context.subscriptions.push(output);

ユーザーが問題を調査するときにも役立ちます。

VSCode拡張機能をテストする

VSCode拡張機能では、通常のユニットテストに加えて、VS Code環境を使用した統合テストも行えます。

@vscode/test-cliなどを利用する

現在の公式ドキュメントでは、主に次のパッケージを利用する方法が案内されています。

@vscode/test-cli
@vscode/test-electron

インストールする場合は次のようにします。

npm install --save-dev @vscode/test-cli @vscode/test-electron

これらを利用すると、VS Code Extension Host環境で拡張機能を実行しながらテストできます。

Generatorの構成によっては、テスト用ファイルや設定が最初から用意されます。

拡張機能のパフォーマンスを意識する

VSCode拡張機能では、機能だけでなくパフォーマンスも重要です。

activateで重い処理を行わない

拡張機能の有効化時に大量のファイルを読み込んだり、重いネットワーク処理を同期的に実行したりすると、VS Codeの操作感へ影響する可能性があります。

できるだけ必要になったタイミングで処理する設計にするとよいでしょう。

Activation Eventを適切に設定する

すべてのワークスペースで即座に起動するより、

特定コマンドが実行されたとき
特定言語を開いたとき
特定ビューを表示したとき
特定ファイルが存在するとき

など、必要なタイミングだけ有効化する方が効率的です。

VSIXファイルを作成する

完成した拡張機能は、Marketplaceへ公開しなくてもVSIX形式で配布できます。

@vscode/vsceをインストールする

VS Code拡張機能のパッケージ化や公開には、@vscode/vsceを利用します。

npm install -g @vscode/vsce

VSIXを作成する

プロジェクトディレクトリで次のコマンドを実行します。

vsce package

すると、

my-extension-0.0.1.vsix

のようなVSIXファイルが生成されます。

VSIXをインストールする

VS Codeのコマンドパレットから、

Extensions: Install from VSIX...

を実行し、生成したVSIXファイルを選択します。

Marketplaceへ公開しない社内専用拡張機能などでは、この方法で配布できます。

VS Code Marketplaceへ公開する

一般ユーザーへ拡張機能を配布する場合は、Visual Studio Marketplaceへ公開できます。

Publisherを作成する

Marketplaceへ公開する場合は、Publisherを準備します。

そのPublisher名をpackage.jsonへ設定します。

"publisher": "my-publisher"

vsce publishを実行する

公開準備ができたら、次のコマンドを使用できます。

vsce publish

また、vsce packageで作成したVSIXファイルをMarketplaceの管理画面からアップロードする方法もあります。

認証方式の変更に注意する

2026年10月時点では、VS Code拡張機能の公開認証について重要な変更予定があります。

Azure DevOpsのグローバルPersonal Access Tokenは2026年12月1日に廃止される予定です。

そのため、特にCI/CDから自動公開する仕組みを構築する場合は、古いPAT前提の記事だけを参考にせず、Microsoft Entra IDを利用した最新の認証方法を確認することが重要です。

README.mdを整備する

Marketplaceへ公開する場合は、README.mdも非常に重要です。

READMEには、少なくとも次の内容を記載するとよいでしょう。

• 拡張機能の概要
• 主な機能
• インストール方法
• 使用方法
• コマンド一覧
• 設定項目
• スクリーンショット
• 必要な環境
• 既知の問題

MarketplaceではREADMEの内容が拡張機能を判断する重要な材料になります。

コードだけでなく、利用方法が分かりやすいREADMEを用意することが大切です。

CHANGELOG.mdを管理する

拡張機能をアップデートする場合は、CHANGELOG.mdへ変更内容を記録しておくと便利です。

たとえば次のように管理できます。

# Change Log

## 1.1.0

- 新しい変換コマンドを追加
- 設定項目を追加

## 1.0.0

- 初回リリース

ユーザーにとっても、バージョンごとの変更内容を確認しやすくなります。

.vscodeignoreを設定する

VSIXには、拡張機能の実行に必要なファイルだけを含めることが理想です。

そのため、.vscodeignoreを利用して不要なファイルを除外できます。

たとえば、開発用ファイルやテストデータ、大容量の不要ファイルなどを除外します。

VSIXを軽量化できるため、公開前に内容を確認しておくとよいでしょう。

Web版VSCodeに対応する

通常のデスクトップ版VS Codeだけでなく、ブラウザ環境で動作するWeb Extensionを作成することもできます。

browserエントリーポイントを利用する

Web Extensionでは、package.jsonにbrowserエントリーポイントを設定できます。

{
  "browser": "./dist/web/extension.js"
}

Web Extensionでは実行環境がブラウザベースになるため、Node.js固有APIには制約があります。

そのため、

ファイルシステム
Node.jsモジュール
ネイティブモジュール
OS依存処理

などを使用する場合は注意が必要です。

GitHub Codespacesやブラウザ版VS Codeなどへの対応を予定している場合は、開発初期からWeb Extension対応を考えておくと設計しやすくなります。

VSCode拡張機能開発で重要な3つの概念

VSCode拡張機能を理解するうえで特に重要なのが、次の3つです。

Activation Events
Contribution Points
VS Code API

Activation Events

Activation Eventsは、「いつ拡張機能を起動するか」を決める仕組みです。

onCommand
onLanguage
onView
workspaceContains
onStartupFinished

などがあります。

Contribution Points

Contribution Pointsは、「VS Codeへ何を追加するか」を宣言する仕組みです。

package.jsonのcontributesで設定します。

commands
menus
keybindings
configuration
views
languages
themes
snippets

などがあります。

VS Code API

VS Code APIは、実際の処理を実装するためのAPIです。

vscode.commands.registerCommand()
vscode.window.showInformationMessage()
vscode.workspace.getConfiguration()
vscode.window.activeTextEditor

などを利用できます。

この3つは、

いつ起動するか
↓
何をVS Codeへ追加するか
↓
どのように動作させるか

という関係で理解すると分かりやすくなります。

初心者におすすめのVSCode拡張機能開発手順

初めてVSCode拡張機能を作る場合は、最初から複雑な機能を作る必要はありません。

次の順番で学習すると理解しやすくなります。

1. TypeScriptのプロジェクトを作る

YeomanとVS Code Extension Generatorを使い、TypeScriptの拡張機能プロジェクトを作成します。

2. F5でExtension Development Hostを起動する

まず生成されたサンプル拡張機能をそのまま実行し、開発環境が正常に動作することを確認します。

3. コマンドを1つ追加する

contributes.commandsとregisterCommand()の関係を理解します。

4. エディターの文字列を取得する

vscode.window.activeTextEditorやdocument.getText()を利用して、VS Code上のテキストへアクセスします。

5. 文字列を書き換える

editor.edit()などを利用して、エディターの内容を変更します。

6. メニューやショートカットを追加する

右クリックメニューやキーボードショートカットからコマンドを実行できるようにします。

7. 設定項目を追加する

ユーザーが拡張機能の動作を変更できるようにします。

8. デバッグとテストを行う

ブレークポイントやExtension Hostを利用して動作を確認します。

9. VSIXを作成する

vsce packageを使用して配布可能なパッケージを作ります。

10. Marketplaceへ公開する

必要に応じてPublisherを準備し、Marketplaceへ公開します。

VSCode拡張機能開発の基本的な流れ

実際の開発フローをまとめると、次のようになります。

作りたい機能を決める
↓
Node.jsとVS Codeを準備する
↓
Extension Generatorでプロジェクト作成
↓
package.jsonで機能を宣言
↓
extension.tsで処理を実装
↓
F5でExtension Development Hostを起動
↓
デバッグ
↓
テスト
↓
READMEやCHANGELOGを整備
↓
vsce package
↓
VSIXで最終確認
↓
必要に応じてMarketplaceへ公開

VSCode拡張機能を開発するときのポイント

VSCode拡張機能は、最初から大規模なものを作ろうとすると構造が複雑になりやすいです。

まずは、

コマンドを追加する
↓
選択文字列を取得する
↓
文字列を加工する
↓
加工結果をエディターへ戻す

という小さな拡張機能を作ると、Extension APIの基本を理解しやすくなります。

その後、

設定
メニュー
ショートカット
ステータスバー
Tree View
Webview
Language Server
Web Extension

などへ発展させるとよいでしょう。

まとめ

VSCodeの拡張機能は、Visual Studio Codeが提供するExtension APIを利用して開発します。

一般的な開発では、Node.jsとTypeScriptを使用し、VS Code Extension Generatorでプロジェクトを作成する方法が分かりやすいでしょう。

開発では特に、package.jsonとextension.tsの役割を理解することが重要です。

package.jsonではContribution Pointsなどを利用してVS Codeへ追加する機能を宣言し、extension.tsではregisterCommand()などのVS Code APIを利用して実際の処理を実装します。

また、Activation Eventsによって拡張機能を有効化するタイミングを制御できます。

VS Code 1.74以降では一部のContribution PointsからActivation Eventを自動的に判断できるため、古いチュートリアルのようにonCommandなどを常に手動指定する必要はありません。

完成した拡張機能は、@vscode/vsceを利用してVSIXへパッケージ化でき、社内配布したりVisual Studio Marketplaceへ公開したりできます。

初めて開発する場合は、まず「コマンドを1つ作る」「エディターの文字列を取得する」「文字列を書き換える」「VSIXを作る」という順番で進めると、VSCode拡張機能開発の仕組みを理解しやすくなります。

以上、VSCodeの拡張機能を開発する方法についてでした。

最後までお読みいただき、ありがとうございました。