VS Codeのエージェントモードを拡張するには、を試してください!

クイックピック

クイックピックは、アクションを実行したり、ユーザーから入力を受け取ったりする簡単な方法です。これは、構成オプションの選択、コンテンツのフィルター処理、またはアイテムのリストからの選択が必要な場合に役立ちます。

Quick Pick example

✔️ すべきこと

  • 明確なメタファーにアイコンを使用する
  • 明確さを加え、アイテムを区別するのに役立つ思慮深いアイコンを使用する
  • 現在のアイテムを表示するために説明を使用する(該当する場合)
  • (簡潔な)追加のコンテキストを提供するために詳細を使用する
  • 一連の基本的な入力に複数ステップパターンを使用する
  • リストから選択する際に新しいアイテムを作成するオプションを提供する(該当する場合)
  • 複数ステップのクイックピックにタイトルを使用する
  • テキスト入力のないクイックピックにタイトルを使用する
  • テキスト入力を求めるクイックピックにタイトルを使用する(プレースホルダーを使用してヒントや例を表示する)
  • グローバルボタン(例:更新アイコン)を備えたクイックピックにタイトルを使用する

❌ すべきでないこと

  • 既存の機能を繰り返さない
  • プレースホルダー自体が目的を説明できる場合にタイトルを使用する
  • プレースホルダーなしで入力を使用する

複数ステップ

クイックピックは、複数ステップを特徴とするように構成できます。単一のフローで関連するが個別の選択をキャプチャする必要がある場合は、これらを使用します。多くのステップを持つ長いフローにクイックピックを使用することは避けてください。ウィザードや同様に複雑なエクスペリエンスとして機能するにはあまり適していません。

Multi-step Quick Pick example

フロー内の現在のステップと合計ステップ数を示すクイックピックタイトルの「1/3」というテキストに注目してください。

複数選択

1つのステップで選択する必要がある密接に関連する選択には、複数選択クイックピックを使用します。

Multi-step Quick Pick example

タイトル

クイックピックは、メイン入力および選択UIの上にタイトルバーを表示するように構成することもできます。ユーザーが選択を行うためにより多くのコンテキストを必要とする場合は、タイトルを使用します。クイックピックの入力プレースホルダーですでに使用されているラベルを使用するタイトルは避けてください。

Multi-step Quick Pick example

区切り文字の使用

クイックピックアイテムは、クイックピック区切り文字を使用して明確なセクションにグループ化できます。これらは、セクションを明確に示す区切り線とラベルを備えています。拡張機能が複数の明確な選択グループを含むクイックピックを備えている場合は、区切り文字を使用します。

Quick Pick with separators