初めての拡張機能
このトピックでは、拡張機能を構築するための基本的な概念について説明します。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 のベストプラクティスに従って拡張機能のユーザーインターフェイスを設計し始めることをお勧めします。