拡張機能の機能概要
Visual Studio Code は、拡張機能がその機能を拡張するための多くの方法を提供しています。使用する適切な Contribution Points と VS Code API を見つけるのが難しい場合があります。このトピックでは、拡張機能の機能をいくつかのカテゴリに分類しています。各カテゴリでは、次の内容を説明します。
- 拡張機能で利用できるいくつかの機能
- これらの機能を使用するための詳細なトピックへのリンク
- いくつかの拡張機能のアイデア
ただし、VS Code の安定性とパフォーマンスを確保するため、拡張機能には 制限 も課しています。たとえば、拡張機能は VS Code UI の DOM にアクセスできません。
共通機能
共通機能 は、どの拡張機能でも使用できる中心的な機能です。
これらの機能には、以下が含まれます。
- コマンド、構成、キーバインディング、またはコンテキストメニュー項目の登録。
- ワークスペースまたはグローバルデータの保存。
- 通知メッセージの表示。
- クイックピックを使用してユーザー入力を収集する。
- システムファイルピッカーを開いて、ユーザーがファイルまたはフォルダーを選択できるようにする。
- プログレス 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 言語サーバーライブラリ を使用して 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 では、常に利用可能で応答性の高いエディターを提供するために、基盤となるウェブテクノロジーの使用を継続的に最適化しようとしており、これらのテクノロジーと製品の進化に合わせて DOM の使用を調整し続けます。拡張機能が VS Code の安定性とパフォーマンスに干渉しないこと、および既存の拡張機能を壊すことなく VS Code の DOM を改善し続けることを保証するために、拡張機能は 拡張ホスト プロセスで実行され、DOM への直接アクセスは禁止されています。
カスタムスタイルシートなし
ユーザーまたは拡張機能によって提供されるカスタムスタイルシートは、DOM 構造とクラス名に対して機能します。これらは内部と見なされるため、文書化されていません。VS Code を進化させ、リファクタリングし、改善するために、ユーザーインターフェースに変更を加える自由が必要です。DOM への変更は、既存のカスタムスタイルシートを壊し、スタイルシートプロバイダーに不満をもたらし、壊れたスタイルシートに起因する UI の不具合によりユーザーエクスペリエンスを悪化させる可能性があります。
代わりに、VS Code は UI カスタマイズをサポートする適切に設計された拡張機能 API を提供することを目指しています。この API は文書化されており、ツールとサンプルが付属しており、今後のすべての VS Code リリースで安定性が保たれます。