拡張機能の機能の概要
Visual Studio Code は、拡張機能がその機能を拡張するための多くの方法を提供しています。適切な 機能拡張ポイント と使用する 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 の デバッグ 機能を利用するには、VS Code のデバッグ UI を特定のデバッガーまたはランタイムに接続する デバッガー拡張機能 を作成します。
拡張機能のアイデア
- デバッグアダプターの実装 を提供して、VS Code のデバッグ UI をデバッガーまたはランタイムに接続します。
- デバッガー拡張機能でサポートされる言語を指定します。
- デバッガーが使用するデバッグ構成属性に対して、豊富な IntelliSense とホバー情報を提供します。
- デバッグ構成スニペットを提供します。
一方、VS Code は デバッグ拡張機能 API のセットも提供しており、これを使用して、ユーザーのデバッグエクスペリエンスを自動化するために、任意の VS Code デバッガーの上にデバッグ関連機能を実装できます。
拡張機能のアイデア
- 動的に作成されたデバッグ構成に基づいてデバッグセッションを開始する。
- デバッグセッションのライフサイクルを追跡する。
- プログラムでブレークポイントを作成および管理する。
UX ガイドライン
拡張機能を VS Code ユーザーインターフェイスにシームレスに適合させるために、UX ガイドライン を参照してください。ここでは、拡張機能 UI を作成するためのベストプラクティスと、推奨される VS Code ワークフローに従うための規則を学ぶことができます。
制限事項
拡張機能には特定の制限事項が課せられています。以下に制限事項とその目的を示します。
DOM アクセスなし
拡張機能は VS Code UI の DOM にアクセスできません。VS Code にカスタム CSS を適用したり、HTML 要素を VS Code UI に追加する拡張機能を記述することはできません。
VS Code では、基盤となる Web テクノロジーの使用を継続的に最適化して、常に利用可能で応答性の高いエディターを提供しようとしており、これらのテクノロジーと製品の進化に合わせて DOM の使用を調整し続けます。拡張機能が VS Code の安定性とパフォーマンスを妨げることがないように、また既存の拡張機能を壊すことなく VS Code の DOM を改善し続けることができるように、拡張機能を 拡張機能ホスト プロセスで実行し、DOM への直接アクセスを防止しています。
カスタムスタイルシートなし
ユーザーまたは拡張機能によって提供されるカスタムスタイルシートは、DOM 構造とクラス名に対して機能します。これらは内部的なものと見なされるため、ドキュメント化されていません。VS Code を進化、リファクタリング、または改善するには、ユーザーインターフェイスに変更を加える自由が必要です。DOM への変更は、既存のカスタムスタイルシートを破損させ、スタイルシートプロバイダーに不満をもたらし、破損したスタイルシートから発生する UI グリッチによるユーザーエクスペリエンスの低下につながる可能性があります。
代わりに、VS Code は UI カスタマイズをサポートする適切に設計された拡張機能 API を提供することを目指しています。API はドキュメント化されており、ツールとサンプルが付属しており、今後のすべての VS Code リリースで安定性が維持されます。