[ESLint] Add app dir to default linting directories (vercel#44426)

Fixes vercel#44424 by adding the `app` folder to an `ESLINT_DEFAULT_DIRS`
constant which defines all folders where the linter should go through.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

---------

Co-authored-by: JJ Kasper <[email protected]>

Author: 2 people

docs/api-reference/cli.md

@@ -120,7 +120,7 @@ npx next start --keepAliveTimeout 70000
 
 ## Lint
 
-`next lint` runs ESLint for all files in the `pages`, `components`, and `lib` directories. It also
+`next lint` runs ESLint for all files in the `pages/`, `app` (only if the experimental `appDir` feature is enabled), `components/`, `lib/`, and `src/` directories. It also
 provides a guided setup to install any required dependencies if ESLint is not already configured in
 your application.
 

docs/basic-features/eslint.md

@@ -126,7 +126,7 @@ If you're using `eslint-plugin-next` in a project where Next.js isn't installed
 
 ## Linting Custom Directories and Files
 
-By default, Next.js will run ESLint for all files in the `pages/`, `components/`, `lib/`, and `src/` directories. However, you can specify which directories using the `dirs` option in the `eslint` config in `next.config.js` for production builds:
+By default, Next.js will run ESLint for all files in the `pages/`, `app` (only if the experimental `appDir` feature is enabled), `components/`, `lib/`, and `src/` directories. However, you can specify which directories using the `dirs` option in the `eslint` config in `next.config.js` for production builds:
 
 ```js
 module.exports = {

packages/next/src/cli/next-lint.ts

@@ -5,7 +5,10 @@ import { join } from 'path'
 import chalk from 'next/dist/compiled/chalk'
 
 import { CliCommand } from '../lib/commands'
-import { ESLINT_DEFAULT_DIRS } from '../lib/constants'
+import {
+  ESLINT_DEFAULT_DIRS,
+  ESLINT_DEFAULT_DIRS_WITH_APP,
+} from '../lib/constants'
 import { runLintCheck } from '../lib/eslint/runLintCheck'
 import { printAndExit } from '../server/lib/utils'
 import { Telemetry } from '../telemetry/storage'
@@ -170,8 +173,13 @@ const nextLint: CliCommand = async (argv) => {
   const dirs: string[] = args['--dir'] ?? nextConfig.eslint?.dirs
   const filesToLint = [...(dirs ?? []), ...files]
 
+  // Remove that when the `appDir` will be stable.
+  const directoriesToLint = !!nextConfig.experimental.appDir
+    ? ESLINT_DEFAULT_DIRS_WITH_APP
+    : ESLINT_DEFAULT_DIRS
+
   const pathsToLint = (
-    filesToLint.length ? filesToLint : ESLINT_DEFAULT_DIRS
+    filesToLint.length ? filesToLint : directoriesToLint
   ).reduce((res: string[], d: string) => {
     const currDir = join(baseDir, d)
     if (!existsSync(currDir)) return res

packages/next/src/lib/constants.ts

@@ -39,7 +39,9 @@ export const NON_STANDARD_NODE_ENV = `You are using a non-standard "NODE_ENV" va
 
 export const SSG_FALLBACK_EXPORT_ERROR = `Pages with \`fallback\` enabled in \`getStaticPaths\` can not be exported. See more info here: https://nextjs.org/docs/messages/ssg-fallback-true-export`
 
+// Consolidate this consts when the `appDir` will be stable.
 export const ESLINT_DEFAULT_DIRS = ['pages', 'components', 'lib', 'src']
+export const ESLINT_DEFAULT_DIRS_WITH_APP = ['app', ...ESLINT_DEFAULT_DIRS]
 
 export const ESLINT_PROMPT_VALUES = [
   {

packages/next/src/lib/verifyAndLint.ts

@@ -2,7 +2,7 @@ import chalk from 'next/dist/compiled/chalk'
 import { Worker } from 'next/dist/compiled/jest-worker'
 import { existsSync } from 'fs'
 import { join } from 'path'
-import { ESLINT_DEFAULT_DIRS } from './constants'
+import { ESLINT_DEFAULT_DIRS, ESLINT_DEFAULT_DIRS_WITH_APP } from './constants'
 import { Telemetry } from '../telemetry/storage'
 import { eventLintCheckCompleted } from '../telemetry/events'
 import { CompileError } from './compile-error'
@@ -28,7 +28,12 @@ export async function verifyAndLint(
     lintWorkers.getStdout().pipe(process.stdout)
     lintWorkers.getStderr().pipe(process.stderr)
 
-    const lintDirs = (configLintDirs ?? ESLINT_DEFAULT_DIRS).reduce(
+    // Remove that when the `appDir` will be stable.
+    const directoriesToLint = hasAppDir
+      ? ESLINT_DEFAULT_DIRS_WITH_APP
+      : ESLINT_DEFAULT_DIRS
+
+    const lintDirs = (configLintDirs ?? directoriesToLint).reduce(
       (res: string[], d: string) => {
         const currDir = join(dir, d)
         if (!existsSync(currDir)) return res

test/integration/eslint/base-directories/app/layout.js

@@ -0,0 +1,8 @@
+const RootLayout = () => (
+  <div>
+    <h1>Hello title</h1>
+    <link href="https://fonts.gstatic.com" />
+  </div>
+)
+
+export default RootLayout

test/integration/eslint/base-directories/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    appDir: false,
+  },
+}

test/integration/eslint/test/index.test.js

@@ -1,11 +1,10 @@
 import fs from 'fs-extra'
 import os from 'os'
-import execa from 'execa'
 
-import { dirname, join } from 'path'
+import { join } from 'path'
 
 import findUp from 'next/dist/compiled/find-up'
-import { nextBuild, nextLint } from 'next-test-utils'
+import { nextBuild, nextLint, File } from 'next-test-utils'
 
 const dirFirstTimeSetup = join(__dirname, '../first-time-setup')
 const dirCustomConfig = join(__dirname, '../custom-config')
@@ -20,6 +19,9 @@ const dirPluginCoreWebVitalsConfig = join(
 )
 const dirIgnoreDuringBuilds = join(__dirname, '../ignore-during-builds')
 const dirBaseDirectories = join(__dirname, '../base-directories')
+const dirBaseDirectoriesConfigFile = new File(
+  join(dirBaseDirectories, '/next.config.js')
+)
 const dirCustomDirectories = join(__dirname, '../custom-directories')
 const dirConfigInPackageJson = join(__dirname, '../config-in-package-json')
 const dirInvalidOlderEslintVersion = join(
@@ -81,7 +83,15 @@ describe('ESLint', () => {
       )
     })
 
+    // Consolidate two tests below when the `appDir` is released.
     test('base directories are linted by default during builds', async () => {
+      dirBaseDirectoriesConfigFile.write(`
+        module.exports = {
+          experimental: {
+            appDir: false,
+          }
+        }
+      `)
       const { stdout, stderr } = await nextBuild(dirBaseDirectories, [], {
         stdout: true,
         stderr: true,
@@ -100,12 +110,54 @@ describe('ESLint', () => {
       expect(output).toContain(
         'Warning: Synchronous scripts should not be used'
       )
+      expect(output).not.toContain(
+        'Warning: `rel="preconnect"` is missing from Google Font'
+      )
 
       // Files in pages, components, lib, and src directories are linted
       expect(output).toContain('pages/_document.js')
       expect(output).toContain('components/bar.js')
       expect(output).toContain('lib/foo.js')
       expect(output).toContain('src/index.js')
+      expect(output).not.toContain('app/layout.js')
+    })
+
+    test('base directories with appDir flag are linted by default during builds', async () => {
+      dirBaseDirectoriesConfigFile.write(`
+        module.exports = {
+          experimental: {
+            appDir: true,
+          }
+        }
+      `)
+      const { stdout, stderr } = await nextBuild(dirBaseDirectories, [], {
+        stdout: true,
+        stderr: true,
+      })
+
+      const output = stdout + stderr
+
+      expect(output).toContain('Failed to compile')
+      expect(output).toContain(
+        'Error: `next/head` should not be imported in `pages/_document.js`. Use `<Head />` from `next/document` instead'
+      )
+      expect(output).toContain(
+        'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
+      )
+      expect(output).toContain('Warning: Do not include stylesheets manually')
+      expect(output).toContain(
+        'Warning: Synchronous scripts should not be used'
+      )
+      expect(output).toContain(
+        'Warning: `rel="preconnect"` is missing from Google Font'
+      )
+
+      // Files in pages, app, components, lib, and src directories are linted
+      expect(output).toContain('pages/_document.js')
+      expect(output).toContain('components/bar.js')
+      expect(output).toContain('lib/foo.js')
+      expect(output).toContain('src/index.js')
+      expect(output).toContain('app/layout.js')
     })
 
     test('custom directories', async () => {
@@ -316,7 +368,15 @@ describe('ESLint', () => {
       )
     })
 
+    // Consolidate two tests below when the `appDir` is released.
     test('base directories are linted by default', async () => {
+      dirBaseDirectoriesConfigFile.write(`
+        module.exports = {
+          experimental: {
+            appDir: false,
+          }
+        }
+      `)
       const { stdout, stderr } = await nextLint(dirBaseDirectories, [], {
         stdout: true,
         stderr: true,
@@ -333,12 +393,52 @@ describe('ESLint', () => {
       expect(output).toContain(
         'Warning: Synchronous scripts should not be used'
       )
+      expect(output).not.toContain(
+        'Warning: `rel="preconnect"` is missing from Google Font'
+      )
 
       // Files in pages, components, lib, and src directories are linted
       expect(output).toContain('pages/_document.js')
       expect(output).toContain('components/bar.js')
       expect(output).toContain('lib/foo.js')
       expect(output).toContain('src/index.js')
+      expect(output).not.toContain('app/layout.js')
+    })
+
+    test('base directories with appDir flag are linted by default', async () => {
+      dirBaseDirectoriesConfigFile.write(`
+        module.exports = {
+          experimental: {
+            appDir: true,
+          }
+        }
+      `)
+      const { stdout, stderr } = await nextLint(dirBaseDirectories, [], {
+        stdout: true,
+        stderr: true,
+      })
+
+      const output = stdout + stderr
+      expect(output).toContain(
+        'Error: `next/head` should not be imported in `pages/_document.js`. Use `<Head />` from `next/document` instead'
+      )
+      expect(output).toContain(
+        'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
+      )
+      expect(output).toContain('Warning: Do not include stylesheets manually')
+      expect(output).toContain(
+        'Warning: Synchronous scripts should not be used'
+      )
+      expect(output).toContain(
+        'Warning: `rel="preconnect"` is missing from Google Font'
+      )
+
+      // Files in pages, app, components, lib, and src directories are linted
+      expect(output).toContain('pages/_document.js')
+      expect(output).toContain('components/bar.js')
+      expect(output).toContain('lib/foo.js')
+      expect(output).toContain('src/index.js')
+      expect(output).toContain('app/layout.js')
     })
 
     test('shows warnings and errors with next/core-web-vitals config', async () => {