VSCode（Visual Studio Code）は多彩な拡張機能を追加して自分好みにカスタマイズできる高機能エディタです。本記事では、VSCode拡張機能開発を始めたい方向けに、まずは必須環境のNode.jsのインストール方法から、Gitを使わずに拡張機能「Hello World」を作成して動かすまでの全手順をわかりやすく解説します。
Node.jsのインストール方法｜まずは開発環境を整えよう
VSCode拡張機能はNode.jsの環境で動作し、npmというパッケージ管理ツールが使われます。最新の安定版（LTS版推奨）をインストールしましょう。
インストール手順
- Node.js公式ダウンロードページへアクセス
- 「推奨版（LTS）」のインストーラーをダウンロード
- インストーラーの指示に従いインストールを完了させる
インストール後、コマンドプロンプトかターミナルで以下を実行し、バージョンが表示されれば成功です。
node -v
npm -vVSCode拡張機能開発のための前準備
Node.js環境が整ったら、拡張機能の下地となるプロジェクトを素早く作れるジェネレーター（Yeoman + generator-code）をインストール＆起動します。
npm install -g yo generator-codeインストール済みであれば次のコマンドで直接起動します。
yo codeあるいは初回だけであればnpxを使いまとめて実行も可能です。
npx --package yo --package generator-code -- yo codeGitなしでの拡張機能雛形作成ポイント
対話ウィザードでは以下のように入力してください。
- 拡張機能の種類：「New Extension (TypeScript)」推奨
- Gitリポジトリ初期化は「No」を選択（Gitなし）
- バンドラーは「unbundled」か「webpack」が初心者におすすめ
- パッケージマネージャは標準の「npm」が無難で扱いやすい
バンドラーとパッケージマネージャの選び方
| 種類 | 特徴・用途 | 選び方のポイント |
|---|---|---|
| unbundled | バンドルしない。設定簡単・ビルド高速 | 小規模シンプルなプロジェクトに適切 |
| webpack | 定番バンドラー。多機能・多設定対応 | 大規模で将来拡張したいなら無難な選択肢 |
| esbuild | 超高速・軽量 | ビルド速度を最重視する場合に有効 |
| npm | Node.js標準パッケージマネージャ | 特にこだわらなければnpm推奨 |
| Yarn | キャッシュ・安定性が魅力 | チームで高速インストールしたい場合におすすめ |
| pnpm | ディスク効率がよく高速 | 大規模開発向きだが拡張機能のパッケージングに要注意 |
プロジェクト作成後～サンプル拡張機能実行まで
- プロジェクトフォルダへ移動
cd プロジェクト名
code .- 依存パッケージのインストール
npm install（Yarnやpnpmを選択した場合はそれぞれのコマンド）
サンプル拡張機能の実行方法
src/extension.ts（またはJavaScript版）に基本のコードが生成されています。
- VSCodeでデバッグを開始（F5キーを押すか、デバッグパネルから実行）。
- 新しく開いたExtension Development Hostウィンドウが開きます。
- Extension Development Hostでコマンドパレットを開きます。キーボードから
- Windows/Linux：
Ctrl + Shift + P - Mac：
Cmd + Shift + P
を押します。
- Windows/Linux：
- コマンドパレットに「hello」と入力すると、「Hello World」コマンドが表示されます。
- 矢印キーで選択し、Enterキーを押すか、マウスでクリックしてコマンドを実行します。
- 画面右上に「Hello World from プロジェクト名!」という通知ポップアップが表示されれば成功です。
よくある疑問：コマンドパレットでの「Hello World」実行とは
VSCodeの「コマンドパレット」は、あらゆるコマンドを瞬時に呼び出せる機能です。拡張機能のコマンドもここから起動します。
- デバッグ起動したExtension Development Host上でコマンドパレットを開き、
- 「hello」と入力し、表示される拡張機能由来の「Hello World」コマンドを選んで実行。
- 成功すると通知が表示されて動作を目で確認できます。
まとめ
Node.jsのインストールから、GitなしでのVSCode拡張機能雛形作成、バンドラー・パッケージマネージャの選択、さらに「Hello World」コマンドの実行まで網羅しました。初心者でも安心してスタートできるシンプルな構成で解説しています。
本記事を参考に、ぜひオリジナルの拡張機能開発に挑戦してみてください。
【参考URL】
Node.js公式ダウンロードページ：https://nodejs.org/ja/download
コメント