拡張機能の機能概要
Visual Studio Code では、拡張機能がその機能を拡張するための多くの方法が提供されています。適切なコントリビューションポイントや VS Code API を見つけるのが難しい場合があります。このトピックでは、拡張機能の機能をいくつかのカテゴリに分類します。各カテゴリでは以下について説明します。
- 拡張機能で使用できるいくつかの機能
- これらの機能を使用するためのより詳細なトピックへのリンク
- いくつかの拡張機能のアイデア
ただし、VS Code の安定性とパフォーマンスを確保するために、拡張機能には制限も設けています。例えば、拡張機能から VS Code UI の DOM にアクセスすることはできません。
一般的な機能
共通機能 (Common Capabilities) は、どの拡張機能でも使用できる機能のコア部分です。
これらの機能には以下が含まれます。
- コマンド、構成、キーバインド、またはコンテキストメニュー項目の登録。
- ワークスペースまたはグローバルデータの保存。
- 通知メッセージの表示。
- Quick Pick を使用したユーザー入力の収集。
- システムファイルピッカーを開いて、ユーザーにファイルやフォルダーを選択させる。
- Progress API を使用して、時間のかかる操作の進行状況を表示する。
テーマ設定
テーマ設定 (Theming) は、エディター内のソースコードの色と VS Code UI の色の両方を制御し、VS Code の外観を決定します。VS Code を緑色の濃淡にして「マトリックス」のようにしたり、究極のミニマルなグレースケールのワークスペースを作成したりしたい場合、テーマが最適です。
拡張機能のアイデア
- ソースコードの色を変更する。
- VS Code UI の色を変更する。
- 既存の TextMate テーマを VS Code に移植する。
- カスタムファイルアイコンを追加する。
宣言型言語機能
宣言型言語機能 (Declarative Language Features) は、括弧の対応付け、自動インデント、構文ハイライトなど、プログラミング言語に対する基本的なテキスト編集サポートを追加します。これはコードを書くことなく、宣言的に行われます。IntelliSense やデバッグなどの高度な言語機能については、プログラムによる言語機能を参照してください。
拡張機能のアイデア
- 一般的な JavaScript スニペットを拡張機能にバンドルする。
- 新しいプログラミング言語の存在を VS Code に知らせる。
- プログラミング言語の文法を追加または置換する。
- 文法インジェクションを使用して、既存の文法を拡張する。
- 既存の TextMate 文法を VS Code に移植する。
プログラムによる言語機能
プログラムによる言語機能 (Programmatic Language Features) は、ホバー、定義への移動、診断エラー、IntelliSense、CodeLens などの豊富なプログラミング言語サポートを追加します。これらの言語機能は、vscode.languages.* API を通じて公開されます。拡張機能は、これらの API を直接使用することも、言語サーバーを作成して VS Code Language Server ライブラリを使用して VS Code に適合させることもできます。
言語機能とその使用目的のリストを提供していますが、これらの API を創造的に使用することを妨げるものはありません。例えば、CodeLens やホバーは追加情報をインラインで表示するのに適しており、診断エラーはスペルミスやコードスタイルのエラーを強調表示するのに使用できます。
拡張機能のアイデア
- API の使用例を表示するホバーを追加する。
- 診断を使用して、ソースコード内のスペルミスやリンターエラーを報告する。
- HTML 用の新しいコードフォーマッタを登録する。
- コンテキストを認識したリッチな IntelliSense を提供する。
- 言語の折りたたみ、パンくずリスト、アウトラインサポートを追加する。
ワークベンチ拡張機能
ワークベンチ拡張機能 (Workbench Extensions) は、VS Code ワークベンチ UI を拡張します。ファイルエクスプローラーに新しい右クリックアクションを追加したり、VS Code の TreeView API を使用してカスタムエクスプローラーを構築したりできます。拡張機能に完全にカスタマイズされたユーザーインターフェイスが必要な場合は、Webview API を使用して、標準の HTML、CSS、JavaScript を使った独自のドキュメントプレビューや UI を構築できます。
拡張機能のアイデア
- ファイルエクスプローラーにカスタムコンテキストメニューアクションを追加する。
- サイドバーに新しいインタラクティブな TreeView を作成する。
- 新しいアクティビティバービューを定義する。
- ステータスバーに新しい情報を表示する。
WebViewAPI を使用してカスタムコンテンツをレンダリングする。- ソース管理プロバイダーを提供する。
デバッグ
VS Code の デバッグ機能を利用するには、VS Code のデバッグ UI を特定のデバッガーやランタイムに接続するデバッガー拡張機能を作成します。
拡張機能のアイデア
- デバッグアダプターの実装を提供することで、VS Code のデバッグ UI をデバッガーやランタイムに接続する。
- デバッガー拡張機能がサポートする言語を指定する。
- デバッガーで使用されるデバッグ構成属性に対して、リッチな IntelliSense とホバー情報を提供する。
- デバッグ構成スニペットを提供する。
その一方で、VS Code はデバッグ拡張 API も提供しています。これを使用すると、ユーザーのデバッグ体験を自動化するために、あらゆる VS Code デバッガー上でデバッグ関連の機能を実装できます。
拡張機能のアイデア
- 動的に作成されたデバッグ構成に基づいてデバッグセッションを開始する。
- デバッグセッションのライフサイクルを追跡する。
- プログラムによってブレークポイントを作成・管理する。
UX ガイドライン
拡張機能を VS Code ユーザーインターフェイスにシームレスに適合させるには、UX ガイドラインを参照してください。ここでは、拡張機能の UI を作成するためのベストプラクティスや、推奨される VS Code ワークフローに従うための慣習を学ぶことができます。
制限事項
拡張機能にはいくつかの制限を設けています。以下にその制限事項とその目的を説明します。
DOM アクセスの禁止
拡張機能は VS Code UI の DOM にアクセスできません。カスタム CSS を適用したり、VS Code UI に HTML 要素を追加したりする拡張機能を作成することはできません。
VS Code では、常時利用可能で応答性の高いエディターを提供するために、基盤となる Web 技術の利用を継続的に最適化しています。これらの技術や製品の進化に合わせて、DOM の使用方法も調整し続けます。拡張機能が VS Code の安定性やパフォーマンスを妨げないように、また、既存の拡張機能を壊すことなく DOM を継続的に改善できるように、拡張機能は Extension Host プロセスで実行し、DOM への直接アクセスを制限しています。
カスタムスタイルシートの禁止
ユーザーや拡張機能によって提供されるカスタムスタイルシートは、DOM 構造やクラス名と競合する可能性があります。これらは内部的なものとして扱われるため、ドキュメント化されていません。VS Code を進化、リファクタリング、改善するためには、ユーザーインターフェイスを変更する自由が必要です。DOM への変更は既存のカスタムスタイルシートを破壊する可能性があり、スタイルシート提供者にとってはフラストレーションを招き、壊れたスタイルシートによる UI の不具合などでユーザー体験を損なうことになります。
その代わりに、VS Code は UI カスタマイズをサポートする適切に設計された拡張機能 API の提供を目指しています。この API はドキュメント化されており、ツールやサンプルも付属しており、今後のすべての VS Code リリースにおいて安定性が保たれています。