初めての拡張機能
このトピックでは、拡張機能を構築するための基本的な概念を説明します。Node.js と Git がインストールされていることを確認してください。
まず、Yeoman と VS Code Extension Generator を使用して、開発の準備ができた TypeScript または JavaScript プロジェクトを scaffold します。
-
後で使用するために 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)) から デバッグ: デバッグを開始 コマンドを実行します。これにより、拡張機能がコンパイルされ、新しい拡張機能開発ホストウィンドウで実行されます。
新しいウィンドウのコマンドパレット (⇧⌘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 コマンドに新しい名前を付けてください。
- 機能拡張して、現在の時刻を情報メッセージで表示する別のコマンドを提供します。Contribution points は、コマンド、メニュー、またはキーバインドを拡張機能に追加するなど、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 または Contribution Point を説明し、UX ガイドラインの推奨事項に従った他のサンプルが含まれています。
JavaScript の使用
このガイドでは、主に TypeScript で VS Code 拡張機能を開発する方法について説明します。これは、TypeScript が VS Code 拡張機能を開発する上で最高のエクスペリエンスを提供すると考えているためです。ただし、JavaScript を好む場合は、helloworld-minimal-sample を使用して進めることもできます。
UX ガイドライン
これは、UX ガイドラインを確認して、VS Code のベストプラクティスに従って拡張機能のユーザーインターフェイスの設計を開始するのにも良い機会です。