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

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

を実行すると対話プロンプトが出るので答えていく。

c:\vscode_project\sampleに作りたい場合は、c:\vscode_projectで実行する。そうしないと、c:\vscode_project\sample\sampleというように入れ子になってしまう

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

vsc_extension2.png

    拡張機能の名前、プロジェクト用のフォルダ名、説明文をあらかじめ用意しておいて回答する。

    その他の対話プロンプトはとりあえず下記を指定しておく。 
    What's type of extension do you want to create? => New Extension (TypeScript)
    Initialize a git repository =>Yes Which bundler to use? => unbundled package manager：npm（迷ったら）

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

    vsc_git.png

    git add .
git commit -m "Initial commit"

    2. コードを書く

    2.1 はじめに

    ここでは、VS Code 拡張が実際に「何かをする」最小コードを追加します。難しい API や設定は一切使いません。 やることはたった 1 つです。

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

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

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

    文字コード（Windows）

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

    改行コード

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

    ※参考：🧵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 形式に変換します。

    5.1 vsce を入れる

    （PowerShell で）

    npm install -g @vscode/vsce

    5.2 VSIXを作る

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

    vsce package

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

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

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

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

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

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

    5.4 実行

    これでExtension Development Hostが起動していなくても拡張機能が実行できる。

    5.5 (参考)アンインストール方法

    VSIXでインストールした拡張機能も通常の拡張機能と同様の操作でアンインストールできる。すなわち左側のナビゲーションバーの拡張機能一覧から選択してアンインストールするだけでよい。

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

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