初めての拡張機能
このトピックでは、拡張機能を構築するための基本的な概念を説明します。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)) から デバッグ: デバッグの開始 コマンドを実行します。これにより、新しい 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」に変更します。- 新しいウィンドウで 開発者: ウィンドウをリロード を実行します。
- もう一度 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 ガイドライン
VS Code のベストプラクティスに従って拡張機能のユーザーインターフェースを設計し始めるために、UX ガイドラインを確認する良い機会でもあります。