妥協はもう終わり：初めての VS Code 拡張機能の開発から公開まで

ユーザーからクリエイターへの転身

多くの開発者は、週に40時間以上を VS Code の中で過ごしています。それは単なるエディタではなく、私たちの創造的なアウトプットのための主要なインターフェースです。しかし、5万件以上のプラグインが公開されているにもかかわらず、毎日15分の手作業を強いるようなワークフローの隙間にいつか直面することになります。それこそが、自分専用のツールを作るべきタイミングです。

拡張機能を作成することで、受動的な消費者から、自分の環境を構築する能動的な設計者へと変わることができます。ニッチな社内フレームワーク用のカスタムスニペットマネージャーや、2,000行のログファイル専用のリンターが必要になるかもしれません。VS Code は Electron と TypeScript で動作しているため、Web 開発者であれば、すぐに開発を始めるために必要なスキルをすでに備えています。

スムーズなスタートを切るために

セットアップのために手動でフォルダを作成する必要はありません。Microsoft は、現在のベストプラクティスに基づいたプロジェクト構成を自動で作成してくれる Yeoman ジェネレーターを提供しています。進める前に、Node.js と Git がインストールされていることを確認してください。

ターミナルで次のコマンドを実行して、必要なスキャフォールディング（雛形作成）ツールをインストールします。

npm install -g yo generator-code

ワークスペースに移動し、yo code でジェネレーターを起動します。IntelliSense やコンパイル時のエラーチェックの恩恵を受けられるよう、New Extension (TypeScript) を選択することをお勧めします。プロンプトが表示されたら、すぐに Git リポジトリを初期化しましょう。これにより、最初の実験的なロジックでビルドが壊れても、変更を元に戻すことができます。

コアコンポーネント：マニフェストとロジック

すべてのプロジェクトは、package.json と src/extension.ts という2つのファイルを中心に構成されます。初心者はここで迷うことが多いですが、その関係性はシンプルです。JSON ファイルを「受付」、TypeScript ファイルを「実際に業務を行うオフィス」と考えてください。

マニフェスト：package.json

このファイルは、contributes フィールドを含むことで、標準的な npm メタデータの役割を超えた機能を持ちます。ここで、エディタに何を追加するかを正確に伝えます。サイドバーの新しいボタン、右クリックメニューの項目、キーボードショートカットなどがこれにあたります。

"contributes": {
  "commands": [
    {
      "command": "my-tool.helloWorld",
      "title": "Hello World ツール"
    }
  ]
}

エディタのメモリ使用量を抑えるために、activationEvents を使用します。これにより、拡張機能が必要なときにだけロードされるようになります。例えば、onLanguage:python と設定すれば、ユーザーが Python ファイルを開くまでツールは休止状態になり、システムリソースを節約できます。

ロジック：src/extension.ts

ロジックは activate 関数と deactivate 関数の中に記述します。activate 関数は、定義したイベントが発生した瞬間に実行されます。以下は、簡単な通知を表示するコマンドを登録する方法です。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('my-tool.helloWorld', () => {
        // カスタム通知を表示
        vscode.window.showInformationMessage('カスタムツールが有効になりました！');
    });

    context.subscriptions.push(disposable);
}

プロのヒント：常に context.subscriptions.push を使用してください。これにより、ユーザーが拡張機能を無効にした際、VS Code がメモリとイベントリスナーを確実に解放するようになります。これは、時間の経過とともにエディタの動作が重くなるのを防ぐためです。

ツールの実行とデバッグ

拡張機能のテストには「ホスト」インスタンスが必要です。F5 キーを押すと、新しいコードが有効になった別の VS Code ウィンドウが起動します。そこでコマンドパレット（Cmd/Ctrl+Shift+P）を使用してカスタムコマンドを実行し、結果をすぐに確認できます。

Web 開発の経験があれば、デバッグ作業は馴染みのあるものでしょう。console.log() を使って、メインウィンドウの「デバッグコンソール」にデータを出力します。変更を加えた場合は、フローティングツールバーの緑色の再起動アイコンをクリックすれば、2秒以内にホストウィンドウを更新できます。

ツールを世界に公開する

公開の準備はできましたか？ Azure DevOps から 個人用アクセス トークン (PAT) を取得する必要があります。トークンを作成する際、アップロード時の認証エラーを避けるために、スコープを「All accessible organizations」と「Marketplace (Manage)」に設定してください。

まず、vsce (Visual Studio Code Extensions) CLI を入手します。

npm install -g @vscode/vsce

次に、ログインしてコードを Marketplace にプッシュします。

vsce login your-publisher-name
vsce publish

拡張機能が公開されると、Marketplace のダッシュボードでダウンロード数やユーザーからのフィードバックを確認できるようになります。リポジトリの「Issues」タブには細心の注意を払ってください。初期のユーザーは、Windows と Linux での挙動の違いなど、エッジケースを発見してくれることが多く、それがより堅牢なバージョン 2.0 の構築に役立ちます。

拡張機能の開発は反復的なプロセスです。ワークフローが変われば、ツールも進化させるべきです。このサイクルをマスターすることで、エディタに使われるのではなく、エディタを自分のために使いこなせるようになります。