From bb235b21a432dd503758add9148134e8acbd21ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arnaud=20Barr=C3=A9?= <arnaud.barre@carbometrix.com>
Date: Wed, 7 Dec 2022 21:42:15 +0100
Subject: [PATCH] fix: improve CLI shortcuts help display (#11247)

---
 packages/vite/src/node/logger.ts       |  5 +++--
 packages/vite/src/node/server/index.ts |  2 +-
 packages/vite/src/node/shortcuts.ts    | 10 ++++++----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/vite/src/node/logger.ts b/packages/vite/src/node/logger.ts
index c61a010f0f6223..dc0d0651655efb 100644
--- a/packages/vite/src/node/logger.ts
+++ b/packages/vite/src/node/logger.ts
@@ -153,9 +153,10 @@ export function printServerUrls(
     info(`  ${colors.green('➜')}  ${colors.bold('Network')}: ${colorUrl(url)}`)
   }
   if (urls.network.length === 0 && optionsHost === undefined) {
-    const note = `use ${colors.reset(colors.bold('--host'))} to expose`
     info(
-      colors.dim(`  ${colors.green('➜')}  ${colors.bold('Network')}: ${note}`),
+      colors.dim(`  ${colors.green('➜')}  ${colors.bold('Network')}: use `) +
+        colors.bold('--host') +
+        colors.dim(' to expose'),
     )
   }
 }
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index 4c26087d9ce2b8..9b3ad9fc19ca01 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -306,7 +306,7 @@ export interface ViteDevServer {
    * @internal
    * Actually BindShortcutsOptions | undefined but api-extractor checks for
    * export before trimming internal types :(
-   * And I don't want to complexity prePatchTypes for that
+   * And I don't want to add complexity to prePatchTypes for that
    */
   _shortcutsOptions: any | undefined
 }
diff --git a/packages/vite/src/node/shortcuts.ts b/packages/vite/src/node/shortcuts.ts
index 3d06d83fd93fed..6787670ca14fc9 100644
--- a/packages/vite/src/node/shortcuts.ts
+++ b/packages/vite/src/node/shortcuts.ts
@@ -50,14 +50,16 @@ export function bindShortcuts(
 
     if (input === 'h') {
       server.config.logger.info(
-        shortcuts
-          .map(
+        [
+          '',
+          colors.bold('  Shortcuts'),
+          ...shortcuts.map(
             (shortcut) =>
               colors.dim('  press ') +
               colors.bold(shortcut.key) +
               colors.dim(` to ${shortcut.description}`),
-          )
-          .join('\n'),
+          ),
+        ].join('\n'),
       )
     }