Add prompt for ESLint to CNA (#42218)

Following up #42012 this adds an
additional prompt for include ESLint config/dependencies or not. As
discussed, this also removes the slow down from doing separate
`dependencies` and `devDependencies` installs since this separation is
no longer required now that we have `output: 'standalone'` which ensures
only actual necessary dependency files are used for production builds.

<details>

<summary>Before</summary>


https://user-images.githubusercontent.com/22380829/198953290-116b422d-4359-4aa9-9d82-b3265fde7b3f.mp4


</details>

<details>

<summary>After</summary>




https://user-images.githubusercontent.com/22380829/198953347-20dbf897-92b3-45ea-a9d2-cfb61622251d.mp4



</details>

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

docs/api-reference/create-next-app.md

@@ -45,6 +45,18 @@ Options:
 
     Initialize as a JavaScript project.
 
+  --eslint
+
+    Initialize with eslint config.
+
+  --no-eslint
+
+    Initialize without eslint config.
+
+  --experimental-app
+
+    Initialize as a `app/` directory project.
+
   --use-npm
 
     Explicitly tell the CLI to bootstrap the app using npm

packages/create-next-app/create-app.ts

@@ -34,13 +34,15 @@ export async function createApp({
   example,
   examplePath,
   typescript,
+  eslint,
   experimentalApp,
 }: {
   appPath: string
   packageManager: PackageManager
   example?: string
   examplePath?: string
   typescript: boolean
+  eslint: boolean
   experimentalApp: boolean
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
@@ -216,6 +218,7 @@ export async function createApp({
       mode,
       packageManager,
       isOnline,
+      eslint,
     })
   }
 

packages/create-next-app/index.ts

@@ -32,6 +32,13 @@ const program = new Commander.Command(packageJson.name)
     `
 
   Initialize as a JavaScript project.
+`
+  )
+  .option(
+    '--eslint',
+    `
+
+  Initialize with eslint config.
 `
   )
   .option(
@@ -148,16 +155,14 @@ async function run(): Promise<void> {
   /**
    * If the user does not provide the necessary flags, prompt them for whether
    * to use TS or JS.
-   *
-   * @todo Allow appDir to support TS or JS, currently TS-only and disables all
-   * --ts, --js features.
    */
   if (!example && !program.typescript && !program.javascript) {
     if (ciInfo.isCI) {
       // default to JavaScript in CI as we can't prompt to
       // prevent breaking setup flows
       program.javascript = true
       program.typescript = false
+      program.eslint = false
     } else {
       const styledTypeScript = chalk.hex('#007acc')('TypeScript')
       const { typescript } = await prompts(
@@ -180,6 +185,19 @@ async function run(): Promise<void> {
           },
         }
       )
+
+      if (!program.eslint) {
+        const styledEslint = chalk.hex('#007acc')('ESLint')
+        const { eslint } = await prompts({
+          type: 'toggle',
+          name: 'eslint',
+          message: `Would you like to use ${styledEslint} with this project?`,
+          initial: false,
+          active: 'Yes',
+          inactive: 'No',
+        })
+        program.eslint = Boolean(eslint)
+      }
       /**
        * Depending on the prompt response, set the appropriate program flags.
        */
@@ -195,6 +213,7 @@ async function run(): Promise<void> {
       example: example && example !== 'default' ? example : undefined,
       examplePath: program.examplePath,
       typescript: program.typescript,
+      eslint: program.eslint,
       experimentalApp: program.experimentalApp,
     })
   } catch (reason) {
@@ -218,6 +237,7 @@ async function run(): Promise<void> {
       appPath: resolvedProjectPath,
       packageManager,
       typescript: program.typescript,
+      eslint: program.eslint,
       experimentalApp: program.experimentalApp,
     })
   }

packages/create-next-app/templates/index.ts

@@ -29,6 +29,7 @@ export const installTemplate = async ({
   isOnline,
   template,
   mode,
+  eslint,
 }: InstallTemplateArgs) => {
   console.log(chalk.bold(`Using ${packageManager}.`))
 
@@ -62,21 +63,24 @@ export const installTemplate = async ({
    * Default dependencies.
    */
   const dependencies = ['react', 'react-dom', 'next']
-  /**
-   * Default devDependencies.
-   */
-  const devDependencies = ['eslint', 'eslint-config-next']
   /**
    * TypeScript projects will have type definitions and other devDependencies.
    */
   if (mode === 'ts') {
-    devDependencies.push(
+    dependencies.push(
       'typescript',
       '@types/react',
       '@types/node',
       '@types/react-dom'
     )
   }
+
+  /**
+   * Default eslint dependencies.
+   */
+  if (eslint) {
+    dependencies.push('eslint', 'eslint-config-next')
+  }
   /**
    * Install package.json dependencies if they exist.
    */
@@ -90,24 +94,10 @@ export const installTemplate = async ({
 
     await install(root, dependencies, installFlags)
   }
-  /**
-   * Install package.json devDependencies if they exist.
-   */
-  if (devDependencies.length) {
-    console.log()
-    console.log('Installing devDependencies:')
-    for (const devDependency of devDependencies) {
-      console.log(`- ${chalk.cyan(devDependency)}`)
-    }
-    console.log()
-
-    const devInstallFlags = { devDependencies: true, ...installFlags }
-    await install(root, devDependencies, devInstallFlags)
-  }
   /**
    * Copy the template files to the target directory.
    */
-  console.log('\nInitializing project with template: ', template, '\n')
+  console.log('\nInitializing project with template:', template, '\n')
   const templatePath = path.join(__dirname, template, mode)
   await cpy('**', root, {
     parents: true,
@@ -129,6 +119,11 @@ export const installTemplate = async ({
       }
     },
   })
+
+  if (!eslint) {
+    // remove un-necessary template file if eslint is not desired
+    await fs.promises.unlink(path.join(root, '.eslintrc.json'))
+  }
 }
 
 export * from './types'

packages/create-next-app/templates/types.ts

@@ -17,4 +17,5 @@ export interface InstallTemplateArgs {
 
   template: TemplateType
   mode: TemplateMode
+  eslint: boolean
 }