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

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というように入れ子になってしまう

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）
上に戻る