Add prompt for ESLint to CNA

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
 }