feat(create-vite): add help usage (#16390)

Co-authored-by: bluwy <[email protected]>

packages/create-vite/__tests__/cli.spec.ts

@@ -103,3 +103,15 @@ test('accepts command line override for --overwrite', () => {
   const { stdout } = run(['.', '--overwrite', 'ignore'], { cwd: genPath })
   expect(stdout).not.toContain(`Current directory is not empty.`)
 })
+
+test('return help usage how to use create-vite', () => {
+  const { stdout } = run(['--help'], { cwd: __dirname })
+  const message = 'Usage: create-vite [OPTION]... [DIRECTORY]'
+  expect(stdout).toContain(message)
+})
+
+test('return help usage how to use create-vite with -h alias', () => {
+  const { stdout } = run(['--h'], { cwd: __dirname })
+  const message = 'Usage: create-vite [OPTION]... [DIRECTORY]'
+  expect(stdout).toContain(message)
+})

packages/create-vite/src/index.ts

@@ -20,11 +20,36 @@ import {
 // Avoids autoconversion to number of the project name by defining that the args
 // non associated with an option ( _ ) needs to be parsed as a string. See #4606
 const argv = minimist<{
-  t?: string
   template?: string
-}>(process.argv.slice(2), { string: ['_'] })
+  help?: boolean
+}>(process.argv.slice(2), {
+  default: { help: false },
+  alias: { h: 'help', t: 'template' },
+  string: ['_'],
+})
 const cwd = process.cwd()
 
+// prettier-ignore
+const helpMessage = `\
+Usage: create-vite [OPTION]... [DIRECTORY]
+
+Create a new Vite project in JavaScript or TypeScript.
+With no arguments, start the CLI in interactive mode.
+
+Options:
+  -t, --template NAME        use a specific template
+
+Available templates:
+${yellow   ('vanilla-ts     vanilla'  )}
+${green    ('vue-ts         vue'      )}
+${cyan     ('react-ts       react'    )}
+${cyan     ('react-swc-ts   react-swc')}
+${magenta  ('preact-ts      preact'   )}
+${lightRed ('lit-ts         lit'      )}
+${red      ('svelte-ts      svelte'   )}
+${blue     ('solid-ts       solid'    )}
+${lightBlue('qwik-ts        qwik'     )}`
+
 type ColorFunc = (str: string | number) => string
 type Framework = {
   name: string
@@ -251,6 +276,12 @@ async function init() {
   const argTargetDir = formatTargetDir(argv._[0])
   const argTemplate = argv.template || argv.t
 
+  const help = argv.help
+  if (help) {
+    console.log(helpMessage)
+    return
+  }
+
   let targetDir = argTargetDir || defaultTargetDir
   const getProjectName = () =>
     targetDir === '.' ? path.basename(path.resolve()) : targetDir