メインコンテンツへスキップ

VS-Codeの拡張機能の作り方

0. 前提（Windows）

必須

  • VS Code（Windows版）
  • Node.js（LTS）：インストール時に “Add to PATH” が有効になっていること
  • Git for Windows：yo code のテンプレ生成で案内されることが多い

動作確認（PowerShell）

PowerShell を開いて：

node -v
npm -v
git --version

が通ればOK。

1. 雛形（TypeScript拡張）を作る（PowerShell）

拡張を作りたい作業フォルダへ移動してから：

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

対話プロンプトはまずこれでOK：

vsc_extension2.png

  • New Extension (TypeScript)
  • package manager：npm（迷ったら）

生成されたフォルダを VS Code で開く。Git管理すべきファイル(node_modules傘下のファイル以外)が着色されるので、Ctrl+@でターミナルを起動して初回コミットを行う。

vsc_git.png

git add .
git commit -m "Initial commit"

2. まず動かす（Windows）

プロジェクト直下で：

npm install

VS Codeで F5 → “Extension Development Host” が起動。

3. Windowsで詰まりやすい点（回避策）コードを書く

3.2.1 実行ポリシー（PowerShellでスクリプトが弾かれる場合）はじめに

通常は不要ですが、npmスクリプトや周辺ツールで詰まる場合があります。ここでは、VS そのときは「現在ユーザーだけ」緩めるのが安全寄りです：Code 拡張が実際に「何かをする」最小コードを追加します。難しい API や設定は一切使いません。 やることはたった 1 つです。

Set-ExecutionPolicy
-Scope

コマンドを実行すると、メッセージを表示する

CurrentUser
RemoteSigned

VS Code 拡張は「イベント駆動」で動きます。
ユーザーがコマンドを実行したときに、登録した処理が呼ばれる仕組みです。

3.2.2 コーディングでの注意点

文字コード（Windows）

    ソース（.ts/.json/.md）は UTF-8 推奨（日本語README含む） Windows特有で Shift_JIS を混ぜると、npmツールや差分、文字化けでトラブルになりやすいので避ける

    改行コード

    • Gitの設定やエディタ設定次第で CRLF/LF が混ざると差分がうるさくなることがあります。
    • 迷ったら リポジトリ内はLF に寄せる運用が無難（VS Code側で制御可能）。

    3.3

    ※参考：🧵VS Codeで改行コード（LF / CRLF）を統一する方法

    パス区切り

    • Node/TS内では path.join() を使う（C:\ と / 混在を避ける）
    • 設定ファイル・出力先などを組むときも path モジュール前提にする

    2.3 編集するファイル

    この時点で、拡張機能の最小サンプルコードはすでに生成されています。
    src/extension.ts を見ると、同等の「コマンドを登録し、実行時にメッセージを表示する」処理が最初から入っています。 この章では手順を明確化するためにサンプルコードを提示していますが、何もしないで次章の まず動かす（Windows）に進んでも大丈夫です。

    編集するのは次の 1 ファイルだけです。このファイルは、拡張機能のエントリーポイントです。 src/extension.ts を開き、内容を一度すべて置き換えてください。

    import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	const disposable = vscode.commands.registerCommand(
		'sampleExtension.hello',
		() => {
			vscode.window.showInformationMessage(
				'Hello from your first VS Code Extension!'
			);
		}
	);

	context.subscriptions.push(disposable);
}

export function deactivate() {}

     これだけで「動く拡張機能」です。
     TypeScript の細かい意味が分からなくても問題ありません。

    コマンドを認識させる設定

    次に、VS Code に「このコマンドが存在する」ことを教えます。

    package.json の contributes セクションを次のようにします。

    "contributes": {
  "commands": [
    {
      "command": "sampleExtension.hello",
      "title": "Sample Extension: Hello"
    }
  ]
}

    command の文字列は、
    extension.ts と package.json で完全一致している必要があります。

    ここまでできたら、次の章で実際に拡張機能を起動します。

    3. まず動かす（Windows）

    3.1 Node Package Manager(npm)で実行に必要な部品を揃える

    プロジェクト直下で：

    npm install

    3.2 Extension Development Hostを起動する

    VS Codeで F5 → “Extension Development Host” が起動。

    ここで、VS Code が別ウィンドウで起動します。
    これは Extension Development Host と呼ばれる、拡張機能の実行・検証専用環境です。

    元の VS Code は拡張機能の 開発・編集用、
    別ウィンドウの VS Code は作成中の拡張が インストールされた状態で動作確認 される場所です。

    拡張機能は VS Code 本体に影響を与える可能性があるため、安全のために別プロセス・別ウィンドウで隔離して実行されます。この挙動は正常であり、エラーではありません。

      空のフォルダでOK 目的：拡張が作用する“対象”を用意するため

      ※ 何も開かなくても動く拡張もあるが、基本は開く。

      3.3 コマンドパレットを開く

        Ctrl + Shift + P

        これは：

          VS Code 拡張の 入口 雛形拡張もここから呼ばれる

          3.4 雛形のコマンドを実行する

            Hello World もしくは `Hello World from Extension
            を選んで Enter。（※ yo codeの質問回答によって表示名が微妙に違う。package.json のcontributes/commands/title 参照） ※yo code: VS Code 拡張の雛形を作るコマンド

            3.5 メッセージが出たら成功

              画面右下に通知が出る

              これで：

              拡張機能は「正しくビルドされ」「正しく読み込まれ」「正しく実行された」

              状態になっている。

              4. Windowsで詰まりやすい点（回避策）

              4.1 実行ポリシー（PowerShellでスクリプトが弾かれる場合）

              通常は不要ですが、npmスクリプトや周辺ツールで詰まる場合があります。 そのときは「現在ユーザーだけ」緩めるのが安全寄りです：

              Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

              5. VSIXで配布（Windowsでのやり方）

              VSIX とは？

              VS Code 拡張機能を配布・インストールするための 拡張機能専用パッケージ形式 です。 拡張機能の本体（JavaScript/TypeScript のビルド結果）や、package.json などのメタ情報が 1 ファイルにまとめられています。

              vsce とは？

              vsce は Visual Studio Code Extension の略で、拡張機能プロジェクトから VSIX を作成するための 公式 CLI ツール です。 vsce package を実行すると、現在のプロジェクトを VSIX 形式に変換します。

              4.5.1 vsce を入れる

              （PowerShell で）

              npm install -g @vscode/vsce

              4.5.2 VSIXを作る

              実行前にreadme.mdを編集する(初期状態から変更する)。これをしていないとエラーで止まる。

              vsce package

              この時点で作成される *.vsix ファイルは、
              「拡張機能がすでにインストールされた状態」を 1 ファイルに固めたものと考えると分かりやすいです。

              Marketplace に公開しなくても、
              この VSIX を配布すれば オフライン環境や社内配布 でも拡張機能を利用できます。

              プロジェクトルートフォルダに*.vsix が生成される。

              4.5.3 VSIXをインストール（GUI）

              GUI からの VSIX インストールは、
              Marketplace に公開していない拡張機能を試すための標準的な方法 です。
              開発中の動作確認や、個人用・社内用拡張の配布でよく使われます。

              • VS Code → 拡張機能ビュー
              • 右上の ... → Extension: Install from VSIX...
              • VSIXを選択前項で作成されたを.vsixファイルを選択する

              5.4

              5.実行

              文字コード（Windows）

              これでExtension

                Development ソース（.ts/.json/.md）は UTF-8 推奨（日本語README含む） Windows特有で Shift_JIS を混ぜると、npmツールや差分、文字化けでトラブルになりやすいので避ける Hostが起動していなくても拡張機能が実行できる。

                6. よくあるWindows固有トラブルと即解決

                • npx が見つからない → Node.jsのPATHが通ってない（再ログイン/再起動 or 再インストール）
                • npm install が遅い/失敗 → 企業プロキシ環境なら npm config set proxy ... が必要になることがある
                • F5 で起動しない → .vscode/launch.json が壊れてないか、拡張ホスト側にエラーが出てないか確認（Debug Console）
                上に戻る