refactor(cli): improve output aesthetics (#6997)

Author: innocenzi

packages/vite/src/node/cli.ts

@@ -97,24 +97,24 @@ cli
 
       const info = server.config.logger.info
 
+      // @ts-ignore
+      const viteStartTime = global.__vite_start_time ?? false
+      const startupDurationString = viteStartTime
+        ? colors.dim(
+            `ready in ${colors.white(
+              colors.bold(Math.ceil(performance.now() - viteStartTime))
+            )} ms`
+          )
+        : ''
+
       info(
-        colors.cyan(`\n  vite v${VERSION}`) +
-          colors.green(` dev server running at:\n`),
-        {
-          clear: !server.config.logger.hasWarned
-        }
+        `\n  ${colors.green(
+          `${colors.bold('VITE')} v${VERSION}`
+        )}  ${startupDurationString}\n`,
+        { clear: !server.config.logger.hasWarned }
       )
 
       server.printUrls()
-
-      // @ts-ignore
-      if (global.__vite_start_time) {
-        // @ts-ignore
-        const startupDuration = performance.now() - global.__vite_start_time
-        info(
-          `\n  ${colors.cyan(`ready in ${Math.ceil(startupDuration)}ms.`)}\n`
-        )
-      }
     } catch (e) {
       createLogger(options.logLevel).error(
         colors.red(`error when starting dev server:\n${e.stack}`),

packages/vite/src/node/logger.ts

@@ -171,11 +171,21 @@ function printServerUrls(
   base: string,
   info: Logger['info']
 ): void {
+  const urls: Array<{ label: string; url: string }> = []
+
   if (hostname.host === '127.0.0.1') {
-    const url = `${protocol}://${hostname.name}:${colors.bold(port)}${base}`
-    info(`  > Local: ${colors.cyan(url)}`)
+    urls.push({
+      label: 'Local',
+      url: colors.cyan(
+        `${protocol}://${hostname.name}:${colors.bold(port)}${base}`
+      )
+    })
+
     if (hostname.name !== '127.0.0.1') {
-      info(`  > Network: ${colors.dim('use `--host` to expose')}`)
+      urls.push({
+        label: 'Network',
+        url: colors.dim(`use ${colors.white(colors.bold('--host'))} to expose`)
+      })
     }
   } else {
     Object.values(os.networkInterfaces())
@@ -189,14 +199,24 @@ function printServerUrls(
             // Node >= v18
             (typeof detail.family === 'number' && detail.family === 4))
       )
-      .map((detail) => {
-        const type = detail.address.includes('127.0.0.1')
-          ? 'Local:   '
-          : 'Network: '
+      .forEach((detail) => {
         const host = detail.address.replace('127.0.0.1', hostname.name)
         const url = `${protocol}://${host}:${colors.bold(port)}${base}`
-        return `  > ${type} ${colors.cyan(url)}`
+        const label = detail.address.includes('127.0.0.1') ? 'Local' : 'Network'
+
+        urls.push({ label, url: colors.cyan(url) })
       })
-      .forEach((msg) => info(msg))
   }
+
+  const length = urls.reduce(
+    (length, { label }) => Math.max(length, label.length),
+    0
+  )
+  urls.forEach(({ label, url: text }) => {
+    info(
+      `  ${colors.green('➜')}  ${colors.bold(label)}: ${' '.repeat(
+        length - label.length
+      )}${text}`
+    )
+  })
 }