Posted inDevelopment

VS Code拡張自作ガイド：アイデアから実践的な.vsixファイル作成まで

Development tutorial - IT technology blog
Development tutorial - IT technology blog

「自分専用」のツールがない苦しみ

著作権ヘッダーを数十個のコードファイルにコピー＆ペーストするためだけに、毎日15〜20分も費やしていませんか？Marketplaceには何千もの拡張機能がありますが、時には「帯に短し襷に長し」という状況に陥ることもあります。各プロジェクトのワークフローの最適化は非常に独特であるため、既存のツールでは対応しきれないことがよくあります。

以前、50,000行を超える大規模なコードベースのリファクタリングに参加したことがあります。そこで得た最大の教訓は、退屈な操作を自動化しなければ、メインのロジックに触れる前に疲れ果ててしまうということです。ミスが起きやすい手動作業を選ぶ代わりに、私は自分の課題を解決するために拡張機能を自作することに決めました。

コードを書く前の「道具」の準備

拡張機能の構築は、思っているほど難しくありません。JavaScript/TypeScriptを理解し、いくつかの基本的なツールをインストールするだけです。VS CodeはElectron上で動作しているため、Node.jsが私たちの核となるプラットフォームになります。

まず、Node.js（v18以上を推奨）をインストールしてください。次に、YeomanとVS Code Extension Generatorをインストールする必要があります。これはプロジェクトを素早く作成するための雛形であり、面倒な手動設定を避けるのに役立ちます。

npm install -g yo generator-code

このジェネレーターを使用することで、初心者が陥りがちなディレクトリ構造に関する細かなミスを完全に排除することができました。

初めてのプロジェクトを初期化する

準備が整いました。ターミナルを開き、以下のコマンドを入力して開始しましょう：

yo code

すぐにナビゲーターが表示されます。実際のプロジェクトで私がよく優先するオプションは以下の通りです：

  • What type of extension?: New Extension (TypeScript) – 型チェック機構によりエラーを未然に防げます。
  • What’s the name of your extension?: MyCustomHelper
  • What’s the identifier?: my-custom-helper
  • Initialize a git repository?: Yes
  • Bundle the source code with webpack?: No (デバッグを容易にするためシンプルにしておきます)。
  • Which package manager to use?: npm

わずか10秒ほどでプロジェクトフォルダが作成されます。code .と入力して、コーディングを開始しましょう。

拡張機能の「心臓部」を解読する

すぐにロジックを書き始めないでください。実際に理解すべき最も重要なファイルは package.json です。ここは、拡張機能がエディタとどのようにやり取りするかを宣言する場所です。

特に以下の2つの項目に注目してください：

  1. activationEvents: 拡張機能が「起動」するタイミングを定義します（例：.tsファイルを開いたときや、特定のコマンドを実行したとき）。
  2. contributes: メニュー、ショートカットキー、コマンドなどの機能を登録する場所です。

次は src/extension.ts です。すべての魔法は activate() 関数の中にあります。ここは、ユーザーが操作したときの処理ロジックを登録する場所です。

実践：著作権ヘッダーを自動挿入するコマンドの作成

ショートカット一つでファイルの先頭に作成者情報を挿入する機能を作ってみましょう。まず、package.json でコマンドを宣言します：

"contributes": {
  "commands": [
    {
      "command": "my-custom-helper.insertHeader",
      "title": "Insert License Header"
    }
  ]
}

次に、src/extension.ts に処理ロジックを書きます。このコードはファイルの先頭位置を特定し、コンテンツを挿入します：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('my-custom-helper.insertHeader', () => {
        const editor = vscode.window.activeTextEditor;
        if (!editor) return;

        const header = `/**\n * Author: プロフェッショナルなエンジニア\n * Created: ${new Date().toLocaleDateString()}\n */\n`;
        editor.edit(editBuilder => {
            editBuilder.insert(new vscode.Position(0, 0), header);
        });
        vscode.window.showInformationMessage('ヘッダーの追加に成功しました！');
    });
    context.subscriptions.push(disposable);
}

ちょっとしたコツ：常に activeTextEditor をチェックしてください。ユーザーがファイルを開かずにコマンドを実行した場合に、拡張機能が無意味にクラッシュするのを防げます。

テストと.vsixファイルのパッケージング

実行してテストするには、F5キーを押すだけです。機能をテストするための新しいVS Codeウィンドウが表示されます。Ctrl+Shift+P を押し、「Insert License Header」と入力して成果を確認しましょう。

すべてがスムーズに動作したら、同僚に送るためにパッケージングしましょう。vsce ツールを使用します：

npm install -g @vscode/vsce
vsce package

このコマンドにより、単一の .vsix ファイルが作成されます。このファイルを送るだけで、受け取った側は「VSIXからインストール…」を選択すれば完了です。Marketplaceに公開アップロードする必要はありません。

拡張機能開発におけるパフォーマンスの落とし穴を避ける

初心者の頃の私の最大の失敗は、あまりにも多くの機能を詰め込みすぎたことです。これによりVS Codeの起動が遅くなり、メモリを浪費してしまいました。拡張機能はできるだけ軽量に保つようにしましょう。

onStartupFinished を使う代わりに、onCommand を通じて本当に必要なときだけ拡張機能をアクティブにするようにしてください。ツールを自作することは、作業を速くするだけでなく、華やかなUIの裏側で現代のエディタがどのように動作しているかを深く理解することにも繋がります。

Share:
Tags: