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