最初の拡張機能

Name: Visual Studio Code
Author: Microsoft

このトピックでは、拡張機能を構築するための基本的な概念を学びます。Node.js と Git がインストールされていることを確認してください。

まず、Yeoman と VS Code Extension Generator を使用して、開発の準備が整った TypeScript または JavaScript プロジェクトの雛形を作成します。

Yeoman を後で使うためにインストールしたくない場合は、次のコマンドを実行してください。
```
npx --package yo --package generator-code -- yo code
```
繰り返し実行するために Yeoman をグローバルにインストールしたい場合は、次のコマンドを実行してください。
```
npm install --global yo generator-code

yo code
```

TypeScript プロジェクトの場合は、以下のフィールドに入力してください。

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Y
# ? Which bundler to use? unbundled
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

エディター内で src/extension.ts を開き、F5 を押すか、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から デバッグ: デバッグの開始 (Debug: Start Debugging) コマンドを実行します。これにより、拡張機能がコンパイルされ、新しい 拡張機能開発ホスト (Extension Development Host) ウィンドウで実行されます。

新しいウィンドウで、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から Hello World コマンドを実行します。

Hello World from HelloWorld! という通知が表示されるはずです。成功です！

デバッグウィンドウで Hello World コマンドが表示されない場合は、package.json ファイルを確認し、engines.vscode のバージョンがインストールされている VS Code のバージョンと互換性があることを確認してください。

拡張機能の開発

メッセージを変更してみましょう。

extension.ts 内のメッセージを "Hello World from HelloWorld!" から "Hello VS Code" に変更します。
新しいウィンドウで 開発者: ウィンドウの再読み込み (Developer: Reload Window) を実行します。
もう一度 Hello World コマンドを実行します。

更新されたメッセージが表示されるはずです。

いくつか試してみるとよいアイデアを紹介します。

コマンドパレットで Hello World コマンドに新しい名前を付けてみます。
現在時刻を情報メッセージとして表示する別のコマンドを寄稿 (Contribute) してみましょう。寄稿ポイントとは、コマンド、メニュー、キーバインドの追加など、拡張機能で VS Code を拡張するために package.json の拡張機能マニフェスト (Extension Manifest) 内で行う静的な宣言です。
vscode.window.showInformationMessage を別の VS Code API 呼び出しに置き換えて、警告メッセージを表示してみましょう。

拡張機能のデバッグ

VS Code の組み込みデバッグ機能を使用すると、拡張機能のデバッグが容易になります。行の横の余白をクリックしてブレークポイントを設定すると、VS Code がそこで停止します。エディター内の変数にマウスカーソルを合わせるか、左側の 実行とデバッグ (Run and Debug) ビューを使用して変数の値を確認できます。デバッグコンソールを使用すると、式を評価することができます。

VS Code での Node.js アプリのデバッグに関する詳細は、Node.js デバッグトピックを参照してください。

次のステップ

次のトピック「拡張機能の構造 (Extension Anatomy)」では、Hello World サンプルのソースコードを詳しく解説し、重要な概念を説明します。

このチュートリアルのソースコードは、https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample にあります。拡張機能ガイドトピックには、それぞれ異なる VS Code API や寄稿ポイントを説明する他のサンプルが含まれており、UX ガイドラインの推奨事項に従っています。

JavaScript の使用

このガイドでは主に TypeScript を使用した VS Code 拡張機能の開発方法を説明しています。これは、TypeScript が VS Code 拡張機能の開発に最適な体験を提供すると考えているためです。しかし、JavaScript を好む場合は、helloworld-minimal-sample を使用してこのガイドを進めることも可能です。

UX ガイドライン

この機会に、VS Code のベストプラクティスに従った拡張機能のユーザーインターフェイスを設計できるよう、UX ガイドラインを確認しておくことをお勧めします。

4/8/2026