Update default eslint choice for CNA setup (#42371)

This ensures we continue to default to ESLint be configured for new
projects so that our lint checks are enabled for new projects.

## 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)

packages/create-next-app/index.ts

@@ -156,53 +156,59 @@ async function run(): Promise<void> {
    * If the user does not provide the necessary flags, prompt them for whether
    * to use TS or JS.
    */
-  if (!example && !program.typescript && !program.javascript) {
+  if (!example) {
     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
+      program.eslint = true
     } else {
-      const styledTypeScript = chalk.hex('#007acc')('TypeScript')
-      const { typescript } = await prompts(
-        {
-          type: 'toggle',
-          name: 'typescript',
-          message: `Would you like to use ${styledTypeScript} with this project?`,
-          initial: true,
-          active: 'Yes',
-          inactive: 'No',
-        },
-        {
-          /**
-           * User inputs Ctrl+C or Ctrl+D to exit the prompt. We should close the
-           * process and not write to the file system.
-           */
-          onCancel: () => {
-            console.error('Exiting.')
-            process.exit(1)
+      if (!program.typescript && !program.javascript) {
+        const styledTypeScript = chalk.hex('#007acc')('TypeScript')
+        const { typescript } = await prompts(
+          {
+            type: 'toggle',
+            name: 'typescript',
+            message: `Would you like to use ${styledTypeScript} with this project?`,
+            initial: true,
+            active: 'Yes',
+            inactive: 'No',
           },
-        }
-      )
+          {
+            /**
+             * User inputs Ctrl+C or Ctrl+D to exit the prompt. We should close the
+             * process and not write to the file system.
+             */
+            onCancel: () => {
+              console.error('Exiting.')
+              process.exit(1)
+            },
+          }
+        )
+
+        /**
+         * Depending on the prompt response, set the appropriate program flags.
+         */
+        program.typescript = Boolean(typescript)
+        program.javascript = !Boolean(typescript)
+      }
 
-      if (!program.eslint) {
+      if (
+        !process.argv.includes('--eslint') &&
+        !process.argv.includes('--no-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,
+          initial: true,
           active: 'Yes',
           inactive: 'No',
         })
         program.eslint = Boolean(eslint)
       }
-      /**
-       * Depending on the prompt response, set the appropriate program flags.
-       */
-      program.typescript = Boolean(typescript)
-      program.javascript = !Boolean(typescript)
     }
   }
 

test/integration/create-next-app/lib/specification.ts

@@ -53,13 +53,19 @@ export const projectSpecification: ProjectSpecification = {
     js: {
       deps: [],
       devDeps: [],
-      files: ['app/page.jsx', 'app/layout.jsx', 'pages/api/hello.js'],
+      files: [
+        'app/page.jsx',
+        'app/head.jsx',
+        'app/layout.jsx',
+        'pages/api/hello.js',
+      ],
     },
     ts: {
       deps: ['@types/node', '@types/react', '@types/react-dom', 'typescript'],
       devDeps: [],
       files: [
         'app/page.tsx',
+        'app/head.tsx',
         'app/layout.tsx',
         'pages/api/hello.ts',
         'tsconfig.json',

test/integration/create-next-app/lib/utils.ts

@@ -7,6 +7,7 @@
 import { ChildProcess, spawn, SpawnOptions } from 'child_process'
 import { existsSync } from 'fs'
 import { resolve } from 'path'
+import glob from 'glob'
 
 import { getProjectSetting, projectSpecification } from './specification'
 import { CustomTemplateOptions, ProjectDeps, ProjectFiles } from './types'
@@ -18,7 +19,21 @@ const cli = require.resolve('create-next-app/dist/index.js')
  */
 export const createNextApp = (args: string[], options?: SpawnOptions) => {
   console.log(`[TEST] $ ${cli} ${args.join(' ')}`, { options })
-  return spawn('node', [cli].concat(args), options ?? {})
+  return spawn('node', [cli].concat(args), {
+    ...options,
+    env: {
+      ...process.env,
+      ...options.env,
+      // unset CI env as this skips the auto-install behavior
+      // being tested
+      CI: '',
+      CIRCLECI: '',
+      GITHUB_ACTIONS: '',
+      CONTINUOUS_INTEGRATION: '',
+      RUN_ID: '',
+      BUILD_NUMBER: '',
+    },
+  })
 }
 
 /**
@@ -46,7 +61,16 @@ export const projectFilesShouldExist = ({
 }: ProjectFiles) => {
   const projectRoot = resolve(cwd, projectName)
   for (const file of files) {
-    expect(existsSync(resolve(projectRoot, file))).toBe(true)
+    try {
+      expect(existsSync(resolve(projectRoot, file))).toBe(true)
+    } catch (err) {
+      require('console').error(
+        `missing expected file ${file}`,
+        glob.sync('**/*', { cwd, ignore: '**/node_modules/**' }),
+        files
+      )
+      throw err
+    }
   }
 }
 
@@ -57,7 +81,16 @@ export const projectFilesShouldNotExist = ({
 }: ProjectFiles) => {
   const projectRoot = resolve(cwd, projectName)
   for (const file of files) {
-    expect(existsSync(resolve(projectRoot, file))).toBe(false)
+    try {
+      expect(existsSync(resolve(projectRoot, file))).toBe(false)
+    } catch (err) {
+      require('console').error(
+        `unexpected file present ${file}`,
+        glob.sync('**/*', { cwd, ignore: '**/node_modules/**' }),
+        files
+      )
+      throw err
+    }
   }
 }
 

test/integration/create-next-app/templates.test.ts

@@ -8,7 +8,7 @@
 
 import {
   createNextApp,
-  projectFilesShouldNotExist,
+  projectFilesShouldExist,
   shouldBeJavascriptProject,
   shouldBeTemplateProject,
   shouldBeTypescriptProject,
@@ -33,21 +33,24 @@ describe('create-next-app templates', () => {
       /**
        * Bind the exit listener.
        */
-      childProcess.on('exit', (exitCode) => {
-        expect(exitCode).toBe(0)
+      await new Promise<void>((resolve) => {
+        childProcess.on('exit', (exitCode) => {
+          expect(exitCode).toBe(0)
+          /**
+           * Verify it correctly emitted a TS project by looking for tsconfig.
+           */
+          projectFilesShouldExist({
+            cwd,
+            projectName,
+            files: ['tsconfig.json'],
+          })
+          resolve()
+        })
         /**
-         * Verify it correctly emitted a TS project by looking for tsconfig.
+         * Simulate "Y" for TypeScript.
          */
-        projectFilesShouldNotExist({
-          cwd,
-          projectName,
-          files: ['tsconfig.json'],
-        })
+        childProcess.stdin.write('N\n')
       })
-      /**
-       * Simulate "Y" for TypeScript.
-       */
-      childProcess.stdin.write('N\n')
     })
   })