UXガイドライン

これらのガイドラインでは、VS Code のネイティブインターフェースとパターンにシームレスに統合する拡張機能を作成するためのベストプラクティスについて説明します。このガイドラインでは、以下の内容を取り上げています。

VS Code の UI アーキテクチャと要素の概要
拡張機能によって提供される UI の推奨事項と例
関連するガイドとサンプルへのリンク

詳細に入る前に、VS Code のさまざまな UI アーキテクチャ部分がどのように組み合わさっているか、そして拡張機能がどこにどのように貢献できるかを理解することが重要です。

コンテナー

VS Code のインターフェースは、大きく分けて **コンテナー** と **アイテム** の 2 つの主要な概念に分けられます。一般的に言って、コンテナーは、1 つ以上のアイテムをレンダリングする VS Code インターフェースのより大きなセクションと考えることができます。

アクティビティバー

アクティビティバーは、VS Code の主要なナビゲーションサーフェスです。拡張機能は、プライマリサイドバーにビューをレンダリングするビューコンテナーとして機能するアイテムをアクティビティバーに追加できます。

プライマリサイドバーは、1 つ以上のビューをレンダリングします。アクティビティバーとプライマリサイドバーは密接に連携しています。コントリビューションされたアクティビティバーアイテム（ビューコンテナー）をクリックすると、プライマリサイドバーが開き、そのビューコンテナーに関連付けられた 1 つ以上のビューがレンダリングされます。具体的な例としては、エクスプローラーがあります。エクスプローラーアイテムをクリックすると、プライマリサイドバーが開き、フォルダー、タイムライン、アウトラインビューが表示されます。

セカンダリサイドバーも、ビューコンテナーとビューをレンダリングするためのサーフェスとして機能します。ユーザーは、ターミナルや問題ビューなどのビューをセカンダリサイドバーにドラッグして、レイアウトをカスタマイズできます。

エディター

エディター領域には、1 つ以上のエディターグループが含まれています。拡張機能は、カスタムエディターまたは Webview をコントリビューションして、エディター領域で開くことができます。また、エディターアクションをコントリビューションして、エディタツールバーに追加のアイコンボタンを表示することもできます。

パネル

パネルは、ビューコンテナーを表示するための別の領域です。デフォルトでは、ターミナル、問題、出力などのビューは、パネル内で一度に 1 つのタブで表示できます。ユーザーは、エディターで行うように、ビューを分割レイアウトにドラッグすることもできます。さらに、拡張機能は、アクティビティバー/プライマリサイドバーの代わりに、パネルにビューコンテナーを個別に追加することもできます。