初めての拡張機能
このトピックでは、拡張機能を構築するための基本的な概念を説明します。Node.js と Git がインストールされていることを確認してください。
まず、Yeoman と VS Code 拡張機能ジェネレーター を使用して、開発準備ができた 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 コマンドに新しい名前を付けます。
- 情報メッセージに現在の時刻を表示する別のコマンドをコントリビュートします。コントリビューションポイントは、拡張機能にコマンド、メニュー、キーバインディングなどを追加するなど、VS Code を拡張するために
package.jsonの拡張機能マニフェストで行う静的な宣言です。 vscode.window.showInformationMessageを別の VS Code API 呼び出しに置き換えて、警告メッセージを表示します。
拡張機能のデバッグ
VS Code の組み込みデバッグ機能により、拡張機能のデバッグが容易になります。行の横にあるガターをクリックしてブレークポイントを設定すると、VS Code はブレークポイントで停止します。エディターで変数にカーソルを合わせるか、左側の 実行とデバッグ ビューを使用して変数の値を確認できます。デバッグコンソールでは式を評価できます。
VS Code での Node.js アプリのデバッグについては、Node.js デバッグのトピックで詳しく学習できます。
次のステップ
次のトピックである 拡張機能の構造 では、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 ガイドライン
また、この機会に当社のUX ガイドラインを確認して、VS Code のベストプラクティスに従った拡張機能のユーザーインターフェース設計を開始することをお勧めします。