fix: improve CLI shortcuts help display (#11247)

Author: ArnaudBarre

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'),
     )
   }
 }

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
 }

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'),
       )
     }