What's the difference between next lint and eslint

[RigottiG]

I'm facing a issue, when I run next lint --fix there are fewer errors than when I run eslint --fix.

shouldn't next lint use eslint?

[icyJoseph]

Well, next lint does use eslint, but the thing is that, IIRC, eslint looks for a configuration file at the root of your project, or you can tell it where to look for it as a CLI option, whereas next lint's ESLINT configuration it's just not visible to you.

You can of course extend/override next lint, with your own stuff, but I'd say, unless your team fully agrees on various conventions, it's best to just take next lint's rules.

[RigottiG]

So if I want to use a custom configuration of eslint, is it correct to use it directly instead of use next lint?

The next lint for example is not catching some unicorn plugin errors

[icyJoseph]

Well, technically yes, but you'd miss out on the next lint rules as well. Instead you could extend/override the next lint configuration.

See here, https://nextjs.org/docs/basic-features/eslint#additional-configurations.

[icyJoseph]

Did you manage to resolve your issue?

[Nittarab]

08 October 2024

`next lint` is deprecated and will be removed in Next.js 16.
For new projects, use create-next-app to choose your preferred linter.
For existing projects, migrate to the ESLint CLI:
npx @next/codemod@canary next-lint-to-eslint-cli .

[OdifYltsaeb]

@icyJoseph I still don't understand how all this eslint config works for Nextjs. My setup runs Nextjs in a docker container. And they produce different results when eslint and next lint use the same config file. And I wonder why that would happen.

So in the case of "next lint" the full command that dockerised env runs is "next lint -c /app/.eslintrc.json" and in the case of eslint its "eslint -c /app/.eslintrc.json". as far as I can tell they both use the same file, since when I add "s" to the end of the file, they both complain the file is missing.

But results are different:

$ next lint -c /app/.eslintrc.json /app

./pages/index.jsx
7:28  Error: Unable to resolve path to module '../components/molecules/WalletOverview'.  import/no-unresolved
7:28  Error: Missing file extension for "../components/molecules/WalletOverview"  import/extensions
18:9  Warning: Unexpected console statement.  no-console

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

and eslint:

yarn run v1.22.19
$ eslint -c /app/.eslintrc.json /app

/app/utils/axios.js
  30:17  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)

Done in 4.29s.

My goal here is to understand how I can make sure that any of them work the same. Because they don't pick up the same errors.

[OdifYltsaeb]

if the eslint config file contents is only:

{
    "extends": [
        "eslint-config-airbnb",
        "eslint-config-next",
        "next/core-web-vitals",
        "prettier",
        "next"
    ]
}

The results are wildly different. Running next lint does not pick up some files, and running eslint does not pick up some errors (and different files). The example here https://github.com/vercel/next.js/blob/canary/examples/with-eslint/.eslintrc is of no help either.

Googling around, it seems like changing package.json contents to "lint": "next lint --dir .", is of some help. But not entirely, as there is some config, somewhere, that is not quite the same as running it with eslint.

[rezaamya]

Check here https://nextjs.org/docs/pages/building-your-application/configuring/eslint

[shirakaba]

next lint does more than just run eslint; it also ensures your project is configured as expected. See my full writeup here: #59347 (comment)

[mostlylikeable]

One issue I've run into unfortunately is that next lint doesn't take "rest" args as a list of files to check, but requires each to be prefixed with --file , so a tool like lefthook requires me to process something like {staged_files}, to add the --file arg name.

While this might seem like not a big deal, the reason for choosing lefthook in the first place is partially because it's more performant. My options are to have lefthook call a js script that manipulates the list of files, or to use some bash-fu to insert the arg names. It would be nice if next lint just worked like prettier and eslinr cli do, and I didn't have to do this...

[beforedisappear]

next lint does not allow you to use the config in a nested directory. Well done developers, again they did everything very, very flexibly.