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：

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

生成されたフォルダを VS Code で開く。

---

2. まず動かす（Windows）

プロジェクト直下で：

npm install

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

---

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

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

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

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

3.2 改行コード

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

3.3 パス区切り

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

---

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

4.1 vsce を入れる

（PowerShell で）

npm install -g @vscode/vsce

4.2 VSIXを作る

vsce package

*.vsix が生成される。

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

• VS Code → 拡張機能ビュー
• 右上の ... → Install from VSIX...
• VSIXを選択

---

5. 文字コード（Windows）

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

---

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

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