CODEWITHSUNDEEP
next.jseslint
Prav
Prav

Reputation: 610

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

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.

No errors whatsoever

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.

Linting works in pages folder

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.

Upvotes: 12

Views: 15652

Answers (2)

Imad Machi
Imad Machi

Reputation: 11

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"],
  },
};

Upvotes: 1

Akasha
Akasha

Reputation: 1077

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']
  }
}

Upvotes: 29

Related Questions