VSCode拡張機能の作り方完全ガイド｜初心者でも2時間で自作パッケージを作成

プログラミング・IT

「VSCodeにこんな機能があったらいいのに…」

日々のコーディング作業で、そんな風に思ったことはありませんか？

実は、VSCodeの拡張機能（エクステンション）は、思っているよりもずっと簡単に作成できます。基本的なJavaScript/TypeScriptの知識があれば、誰でも自分専用の拡張機能を開発できるんです。

この記事では、VSCodeの拡張機能を初めて作る方に向けて、開発環境のセットアップから実際の公開まで、すべての手順を詳しく解説します。

スポンサーリンク

VSCode拡張機能とは？

VSCodeの拡張機能は、エディタに新しい機能を追加するプラグインです。

現在、Marketplaceには数万の拡張機能が公開されており、言語サポート、テーマ、デバッガー、スニペットなど、多様な機能が提供されています。

拡張機能でできること：

  • コマンドパレットに新しいコマンドを追加
  • エディタの右クリックメニューをカスタマイズ
  • サイドバーに独自のビューを追加
  • 特定の言語のシンタックスハイライトを追加
  • デバッグ機能の統合
  • テキストの自動整形や変換

これらの機能は、VSCode APIを使用することで実現できます。

開発に必要なもの

拡張機能の開発を始める前に、以下のツールをインストールする必要があります。

必須ツール：

  1. Node.js（LTS版を推奨）
  • 公式サイトからダウンロード：https://nodejs.org/
  • バージョン確認：node -v
  1. Visual Studio Code
  • 当然ですが、VSCode本体が必要です
  1. Git
  • バージョン管理に使用
  • インストール確認：git --version

開発支援ツール：

  • Yeoman（yo）：プロジェクトのひな形生成ツール
  • generator-code：VSCode拡張機能専用のジェネレーター
  • vsce：拡張機能のパッケージング・公開ツール

これらは後ほどインストールします。

開発環境のセットアップ

まず、必要なツールをnpmでインストールします。

インストールコマンド：

npm install -g yo generator-code vsce

各ツールの役割：

  • yo：プロジェクトの雛形を生成
  • generator-code：VSCode拡張機能のテンプレート提供
  • vsce：パッケージング（.vsixファイル作成）と公開

インストールが完了したら、バージョンを確認しましょう：

yo --version
vsce --version

プロジェクトの作成

Yeomanを使って、拡張機能のプロジェクトを生成します。

実行コマンド：

yo code

すると、対話形式で質問されるので、以下のように答えます：

質問と回答例：

? What type of extension do you want to create?
→ New Extension (TypeScript)

? What's the name of your extension?
→ my-first-extension

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

? What's the description of your extension?
→ My first VS Code extension

? Initialize a git repository?
→ Yes

? Which bundler to use?
→ unbundled（後でwebpackも可能）

? Which package manager to use?
→ npm

? Do you want to open the new folder with Visual Studio Code?
→ Open with `code`

拡張機能のタイプ：

  • New Extension (TypeScript)：汎用的な拡張機能（推奨）
  • New Color Theme：カラーテーマ
  • New Language Support：言語サポート
  • New Code Snippets：スニペット集
  • New Extension Pack：複数の拡張機能をまとめたパック

初めての開発では、TypeScriptを選択することをおすすめします。

プロジェクト構造の理解

生成されたプロジェクトには、以下のようなファイルが含まれています。

my-first-extension/
├── .vscode/
│   ├── launch.json         # デバッグ設定
│   ├── settings.json       # プロジェクト設定
│   └── tasks.json          # ビルドタスク設定
├── src/
│   ├── extension.ts        # メイン処理（ここを編集）
│   └── test/              # テストコード
├── package.json           # 拡張機能の設定ファイル
├── tsconfig.json          # TypeScript設定
├── README.md              # 説明書
└── CHANGELOG.md           # 変更履歴

重要なファイル：

  1. src/extension.ts：拡張機能の本体
  2. package.json：拡張機能のメタデータと設定

extension.ts の編集

src/extension.tsが拡張機能のメインコードです。

基本構造：

import * as vscode from 'vscode';

// 拡張機能が有効化されたときに実行
export function activate(context: vscode.ExtensionContext) {
    console.log('拡張機能がアクティブになりました');

    // コマンドを登録
    let disposable = vscode.commands.registerCommand(
        'my-first-extension.helloWorld',
        () => {
            vscode.window.showInformationMessage(
                'Hello World from my-first-extension!'
            );
        }
    );

    context.subscriptions.push(disposable);
}

// 拡張機能が無効化されたときに実行
export function deactivate() {
    console.log('拡張機能が無効化されました');
}

主要な関数：

  • activate()：拡張機能が起動するときに実行される
  • deactivate()：拡張機能が無効化されるときに実行される

よく使うVSCode API：

// メッセージ表示
vscode.window.showInformationMessage('情報メッセージ');
vscode.window.showWarningMessage('警告メッセージ');
vscode.window.showErrorMessage('エラーメッセージ');

// 現在のエディタを取得
const editor = vscode.window.activeTextEditor;

// テキストを取得
const text = editor.document.getText();

// 選択範囲を取得
const selection = editor.selection;
const selectedText = editor.document.getText(selection);

// テキストを挿入
editor.edit(editBuilder => {
    editBuilder.insert(editor.selection.active, '挿入するテキスト');
});

package.json の設定

package.jsonは拡張機能の設定ファイルです。

重要な設定項目：

{
    "name": "my-first-extension",
    "displayName": "My First Extension",
    "description": "初めての拡張機能",
    "version": "0.0.1",
    "publisher": "your-publisher-name",
    "engines": {
        "vscode": "^1.85.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:my-first-extension.helloWorld"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "my-first-extension.helloWorld",
                "title": "Hello World"
            }
        ]
    }
}

各フィールドの意味：

  • name：拡張機能の識別名（英数字とハイフンのみ）
  • displayName：Marketplaceで表示される名前
  • publisher：公開者名（後で設定可能）
  • engines.vscode：対応するVSCodeのバージョン
  • activationEvents：拡張機能が起動するタイミング
  • contributes：VSCodeに提供する機能の定義

activationEvents の設定

拡張機能がいつ起動するかを定義します。

主なアクティベーションイベント：

"activationEvents": [
    // コマンド実行時
    "onCommand:extension.commandName",

    // 特定の言語のファイルを開いたとき
    "onLanguage:javascript",
    "onLanguage:python",

    // VSCode起動時（使いすぎ注意）
    "*",

    // 特定のビューが開かれたとき
    "onView:nodeDependencies"
]

基本的には必要なタイミングだけ起動するように設定しましょう。"*"を使うとVSCode起動時に常に起動するため、パフォーマンスに影響します。

contributes の設定

VSCodeに機能を提供する方法を定義します。

コマンドの追加：

"contributes": {
    "commands": [
        {
            "command": "extension.myCommand",
            "title": "My Command",
            "category": "My Extension"
        }
    ]
}

右クリックメニューへの追加：

"contributes": {
    "menus": {
        "editor/context": [
            {
                "when": "editorFocus",
                "command": "extension.myCommand",
                "group": "myGroup@1"
            }
        ]
    }
}

キーボードショートカットの設定：

"contributes": {
    "keybindings": [
        {
            "command": "extension.myCommand",
            "key": "ctrl+shift+a",
            "mac": "cmd+shift+a",
            "when": "editorTextFocus"
        }
    ]
}

デバッグとテスト

拡張機能の動作確認は、VSCodeのデバッガーで行います。

デバッグ実行の手順：

  1. VSCodeでプロジェクトを開く
  2. F5キーを押す（または「実行」→「デバッグの開始」）
  3. 新しいVSCodeウィンドウが開く（Extension Development Host）
  4. 新しいウィンドウでコマンドパレット（Ctrl + Shift + P）を開く
  5. 作成したコマンドを実行

デバッグウィンドウの操作：

  • 元のウィンドウ：デバッガーとして機能（ブレークポイント設定可能）
  • 新しいウィンドウ：拡張機能がロードされた状態

コードを変更したら、デバッグウィンドウで「Developer: Reload Window」を実行すると変更が反映されます。

実践例：選択テキストを大文字に変換

実際に動作する拡張機能を作ってみましょう。

extension.ts：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    let disposable = vscode.commands.registerCommand(
        'my-extension.toUpperCase',
        () => {
            const editor = vscode.window.activeTextEditor;

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

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

            if (text.length === 0) {
                vscode.window.showWarningMessage('テキストを選択してください');
                return;
            }

            const upperText = text.toUpperCase();

            editor.edit(editBuilder => {
                editBuilder.replace(selection, upperText);
            });

            vscode.window.showInformationMessage('大文字に変換しました');
        }
    );

    context.subscriptions.push(disposable);
}

export function deactivate() {}

package.json（contributesセクション）：

"contributes": {
    "commands": [
        {
            "command": "my-extension.toUpperCase",
            "title": "選択テキストを大文字に変換"
        }
    ],
    "menus": {
        "editor/context": [
            {
                "command": "my-extension.toUpperCase",
                "group": "1_modification"
            }
        ]
    }
}

これで、テキストを選択して右クリックメニューから実行できる拡張機能が完成です。

パッケージング（.vsixファイルの作成）

開発した拡張機能をインストール可能な形式にパッケージングします。

パッケージング手順：

  1. プロジェクトのルートディレクトリで実行：
vsce package
  1. your-extension-0.0.1.vsixファイルが生成される

インストール方法：

方法1：VSCodeから直接インストール

  1. VSCodeの拡張機能ビューを開く
  2. 右上の「…」メニューをクリック
  3. 「VSIXからのインストール…」を選択
  4. 生成した.vsixファイルを選択

方法2：コマンドラインからインストール

code --install-extension your-extension-0.0.1.vsix

README.md とアイコンの設定

拡張機能をより魅力的にするため、説明書とアイコンを設定しましょう。

README.md の書き方：

# My Extension

選択したテキストを大文字に変換する拡張機能です。

## 機能

- 選択テキストを大文字に変換

## 使い方

1. テキストを選択
2. 右クリックメニューから「選択テキストを大文字に変換」を選択

## ショートカットキー

- Windows/Linux: `Ctrl + Shift + U`
- Mac: `Cmd + Shift + U`

## 必要要件

- VS Code 1.85.0以上

## リリースノート

### 1.0.0

初回リリース

アイコンの追加：

  1. 128×128ピクセルのPNG画像を用意
  2. プロジェクトルートに配置（例：icon.png）
  3. package.jsonに追加：
{
    "icon": "icon.png"
}

Marketplaceへの公開

作成した拡張機能を世界中の開発者と共有できます。

公開の手順：

1. Azure DevOpsアカウントの作成

https://dev.azure.com にアクセスしてアカウントを作成

2. Personal Access Tokenの取得

  1. Azure DevOpsにログイン
  2. 右上のユーザーアイコン → 「Personal access tokens」
  3. 「New Token」をクリック
  4. 名前を入力し、Scopeで「Marketplace」→「Manage」を選択
  5. トークンをコピー（後で使えないので保存しておく）

3. Publisherの作成

https://marketplace.visualstudio.com/manage にアクセスし、新しいPublisherを作成

4. vsceでログイン

vsce login <publisher-name>

Personal Access Tokenを貼り付け

5. 公開

vsce publish

これで、VS Code Marketplaceに公開されます！

トラブルシューティング

コンパイルエラーが出る

原因：
TypeScriptの設定やNode.jsのバージョンの問題

対処法：

npm install
npm run compile

デバッグウィンドウでコマンドが見つからない

原因：
package.jsonの設定ミス

対処法：

  • contributes.commandsでコマンドが定義されているか確認
  • activationEventsが正しく設定されているか確認

パッケージング時にエラー

原因：
README.mdやLICENSEファイルの不足

対処法：

# 警告を無視して強制実行
vsce package --allow-missing-repository

よくある質問

Q1：JavaScriptでも作れますか？

はい、プロジェクト作成時に「New Extension (JavaScript)」を選択すれば可能です。ただし、TypeScriptの方が型チェックがあり安全です。

Q2：公開せずにチーム内で共有できますか？

はい、.vsixファイルを配布すれば、Marketplace公開なしで使用できます。

Q3：既存の拡張機能を改造できますか？

多くの拡張機能はGitHubでオープンソースとして公開されています。フォークして改造することも可能です。

Q4：商用利用は可能ですか？

はい、VSCode拡張機能は商用利用可能です。ただし、使用するライブラリのライセンスには注意してください。

まとめ

VSCodeの拡張機能開発は、思ったよりも簡単に始められます。

開発の流れ：

  1. Node.js、Yeoman、generator-codeをインストール
  2. yo codeでプロジェクト生成
  3. src/extension.tsでロジックを実装
  4. package.jsonで機能を定義
  5. F5でデバッグ実行
  6. vsce packageでパッケージング
  7. 必要に応じてMarketplaceに公開

次のステップ：

  • VSCode APIドキュメントを読む：https://code.visualstudio.com/api
  • 既存の拡張機能のソースコードを読む
  • 自分の作業を効率化する拡張機能を考える

毎日使うエディタだからこそ、自分専用の機能を追加してみましょう。小さな改善が、日々の開発体験を大きく向上させますよ。

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました