Next lint not working on files anywhere other than the ones inside the pages folder

Question

I have a FRESHLY installed NextJS app with TypeScript. I am using Next V12, when I run yarn lint, it runs next lint and shows no errors.

And now when I add an extra rule in the .eslintrc file like "no-unused-vars": 2 (it means to show an error when there's an un-used variable), and add an un-used variable on purpose in my index.tsx file inside the pages folder so that I can test the linting, it works as expected.

But when I add another folder called hooks and add an index.tsx file with unused variables in it, it doesn't capture the unused variable error in hooks folder, only captures the ones inside pages folder.

My .eslintrc file looks like this -

{
    "extends": "next/core-web-vitals",
    "rules": {
        "no-unused-vars": 2
    }
}

If anyone faced this issue before and knows what I'm doing wrong, please suggest.

Answer 1

According to the docs, next lint runs ESLint for files in the following folders: pages, components, and lib.

To run ESLint for other folders as well, you have to use the --dir flag.

You can either do so directly in the terminal:

yarn run lint -- --dir . //for all folders in your project root directory

yarn run lint -- --dir pages hooks //only for the folders "pages" and "hooks"

Or change the lint script in package.json:

{
  ...
  "scripts": {
    ...
    "lint": "next lint --dir ." //or "next lint --dir pages hooks"
    ...
  }
  ...
}

Note that the above is for development mode.

For production mode, you can add the dirs option to eslint in next.config.js:

module.exports = {
  eslint: {
    dirs: ['.'] //or ['pages', 'hooks']
  }
}

Answer 2

In nextjs 13, and if you're working with the 'src' folder, you can just add this folder to your eslint directory like the following:

// next.config.js
const nextConfig = {
  ..., // other config
  eslint: {
    dirs: ["src"],
  },
};