next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Next ESLint does not match ESLint (App directory)

Open juanzgc opened this issue 1 year ago • 4 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.13.0
      npm: 8.1.4
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 13.0.3
      eslint-config-next: 13.0.3
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Linting is not currently happening on the /app directory. I've added prettier and when testing with yarn lint it works on /pages directory however, it doesn't catch errors in the /app directory.

Expected Behavior

yarn lint should provide the same linting errors as yarn run eslint

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

n/a

To Reproduce

yarn add eslint-config-prettier
yarn add eslint-plugin-prettier
yarn add prettier

.eslintrc.json:

{
  "extends": ["next/core-web-vitals", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

.prettierrc.json:

{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Then in the /app directory include semicolons and double quotes. You expect to see an ESLint error that comes from Prettier however, that is not the case.

fwiw, a temporary fix is found in: https://nextjs.org/docs/basic-features/eslint#linting-custom-directories-and-files

juanzgc avatar Nov 17 '22 05:11 juanzgc

Linting is currently not applied to app/, so this is expected.

The source code is here: https://github.com/vercel/next.js/blob/0a2ae766a8c0df6f102c59b7f37abcbb50af698d/packages/next/lib/constants.ts#L45

balazsorban44 avatar Nov 17 '22 18:11 balazsorban44

Linting is currently not applied to app/, so this is expected.

The source code is here:

https://github.com/vercel/next.js/blob/0a2ae766a8c0df6f102c59b7f37abcbb50af698d/packages/next/lib/constants.ts#L45

Had a moment where this behaviour confused me as I was running next lint in the console and it was saying there were no warnings or errors.

Would it make sense to add app to the default directories at this stage? Or otherwise make next lint check for the appDir feature flag, or at least show a warning to the user that app/* isn't linted on the default settings?

harryjamesuk avatar Nov 23 '22 00:11 harryjamesuk

here is another ticket about the same problem: https://github.com/vercel/next.js/issues/44424 and it has a PR https://github.com/vercel/next.js/pull/44426

chrisweb avatar Jan 06 '23 17:01 chrisweb

Is there any possibility of being able to configure other folders than the default ones in development?

For example in my case i don't want to put (services, providers, tests) folders, all inside app just for linting.

JuAnmdq avatar Feb 15 '24 13:02 JuAnmdq