UX ガイドライン

これらのガイドラインは、VS Code のネイティブインターフェイスやパターンとシームレスに統合される拡張機能を作成するためのベストプラクティスを網羅しています。本ガイドラインには以下が含まれます。

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

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

コンテナー

VS Code のインターフェイスは、大きく分けてコンテナとアイテムという2つの主要な概念で構成されます。一般的に、コンテナとは VS Code インターフェイスの大きな領域のことで、1つ以上のアイテムをレンダリングします。

アクティビティバー

アクティビティバーは、VS Code における中心的なナビゲーション領域です。拡張機能は、プライマリサイドバー内にビューをレンダリングするビューコンテナとして機能するアイテムを、アクティビティバーに追加できます。

プライマリサイドバー

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

セカンダリサイドバー

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

エディター

エディタ領域には1つ以上のエディタグループが含まれます。拡張機能は、エディタ領域で開くカスタムエディタやWebviewを提供できます。また、エディタツールバーにアイコンボタンを追加するためのエディタアクションを提供することも可能です。

パネル

パネルも、ビューコンテナを表示するための領域です。デフォルトでは、ターミナル、問題、出力などのビューがパネル内のタブに1つずつ表示されます。ユーザーは、エディタと同様にビューをドラッグして分割レイアウトを作成することもできます。さらに、拡張機能はアクティビティバーやプライマリサイドバーの代わりに、パネル専用のビューコンテナを追加することも選択できます。

ステータスバー

ステータスバーは、ワークスペースや現在アクティブなファイルに関するコンテキスト情報を提供します。ここには2つのグループのステータスバーアイテムがレンダリングされます。

アイテム

拡張機能は、上記のさまざまなコンテナにアイテムを追加できます。

ビュー

ビューは、ツリービュー、ウェルカムビュー、またはWebview ビューとして提供でき、インターフェイスの他の領域にドラッグして移動可能です。

ビューツールバー

拡張機能は、ビューツールバーのボタンとして表示される、ビュー固有のアクションを公開できます。

サイドバーツールバー

ビューコンテナ全体にスコープされたアクションは、サイドバーツールバーで公開することもできます。

エディタツールバー

拡張機能は、エディタにスコープされたエディタアクションを、エディタツールバーに直接追加できます。

パネルツールバー

パネルツールバーでは、現在選択されているビューにスコープされたオプションを公開できます。たとえば、ターミナルビューでは新しいターミナルの追加やビューレイアウトの分割などを行うアクションが公開されます。問題ビューに切り替えると、別の一連のアクションが表示されます。

ステータスバーアイテム

左側のステータスバーアイテムはワークスペース全体にスコープされます。右側のアイテムは、アクティブなファイルにスコープされます。

共通の UI 要素

コマンド パレット

拡張機能は、コマンドパレットに表示されるコマンドを提供し、機能を迅速に実行できるようにします。

クイックピック

クイックピックは、さまざまな方法でユーザーの入力を取得します。単一選択、複数選択、または自由入力形式のテキスト入力を要求できます。

通知

通知は、情報、警告、エラーメッセージをユーザーに伝えるために使用されます。進行状況を示すためにも使用できます。

Webview

Webviewは、VS Code の「ネイティブ」API ではカバーできないユースケースに対して、カスタムコンテンツや機能を表示するために使用できます。

コンテキストメニュー

コマンドパレットの一貫した配置とは対照的に、コンテキストメニューを使用すると、ユーザーは特定の場所からアクションを実行したり、設定を行ったりすることができます。

ウォークスルー

ウォークスルーは、リッチなコンテンツを備えた多段階のチェックリストを通じて、拡張機能の使用開始（オンボーディング）に向けた一貫した体験を提供します。

設定

設定を使用すると、ユーザーは拡張機能に関連するオプションを構成できます。