【初心者向け】Node.jsインストールから始めるVSCode拡張機能開発入門｜GitなしでHello Worldを動かすまで

VSCode（Visual Studio Code）は多彩な拡張機能を追加して自分好みにカスタマイズできる高機能エディタです。本記事では、VSCode拡張機能開発を始めたい方向けに、まずは必須環境のNode.jsのインストール方法から、Gitを使わずに拡張機能「Hello World」を作成して動かすまでの全手順をわかりやすく解説します。

Node.jsのインストール方法｜まずは開発環境を整えよう

VSCode拡張機能はNode.jsの環境で動作し、npmというパッケージ管理ツールが使われます。最新の安定版（LTS版推奨）をインストールしましょう。

インストール手順

1. Node.js公式ダウンロードページへアクセス
   
2. 「推奨版（LTS）」のインストーラーをダウンロード
3. インストーラーの指示に従いインストールを完了させる

インストール後、コマンドプロンプトかターミナルで以下を実行し、バージョンが表示されれば成功です。

node -v
npm -v

VSCode拡張機能開発のための前準備

Node.js環境が整ったら、拡張機能の下地となるプロジェクトを素早く作れるジェネレーター（Yeoman + generator-code）をインストール＆起動します。

npm install -g yo generator-code

インストール済みであれば次のコマンドで直接起動します。

yo code

あるいは初回だけであればnpxを使いまとめて実行も可能です。

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

Gitなしでの拡張機能雛形作成ポイント

対話ウィザードでは以下のように入力してください。

• 拡張機能の種類：「New Extension (TypeScript)」推奨
• Gitリポジトリ初期化は「No」を選択（Gitなし）
• バンドラーは「unbundled」か「webpack」が初心者におすすめ
• パッケージマネージャは標準の「npm」が無難で扱いやすい

バンドラーとパッケージマネージャの選び方

プロジェクト作成後～サンプル拡張機能実行まで

1. プロジェクトフォルダへ移動

cd プロジェクト名
code .

2. 依存パッケージのインストール

npm install

（Yarnやpnpmを選択した場合はそれぞれのコマンド）

サンプル拡張機能の実行方法

1. src/extension.ts（またはJavaScript版）に基本のコードが生成されています。
   
2. VSCodeでデバッグを開始（F5キーを押すか、デバッグパネルから実行）。
3. 新しく開いたExtension Development Hostウィンドウが開きます。
4. Extension Development Hostでコマンドパレットを開きます。キーボードから
   • Windows/Linux：Ctrl + Shift + P
   • Mac：Cmd + Shift + P
     を押します。
     
5. コマンドパレットに「hello」と入力すると、「Hello World」コマンドが表示されます。
6. 矢印キーで選択し、Enterキーを押すか、マウスでクリックしてコマンドを実行します。
7. 画面右上に「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