javascript - Next.js - Eslint is not linting any pages in dev mode (aside from pages_app.js) - Stack Overflow

admin管理员组

文章数量:1287281

I'm having problems setting up eslint with Next.js. It actually properly lints all my files when I run next build, but when I run the application in dev mode (next), eslint only actually lints pages/_app.js, and totally ignores all my other files (eg. pages/index.js).

My next.config.js looks like this:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (dev) {
      config.module.rules.push({
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      })
    }
    return config
  },
}

and .eslintrc.js looks like this:

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:remended",
        "plugin:react/remended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": 0,
        "react/react-in-jsx-scope": 0
    }
};

Is there a sample project somewhere that demonstrates setting up eslint with Next.js? Eslint is pretty much the standard for any modern JS web application, so I'm surprised to find no mention of eslint in the docs or any of the demo projects.

I'm having problems setting up eslint with Next.js. It actually properly lints all my files when I run next build, but when I run the application in dev mode (next), eslint only actually lints pages/_app.js, and totally ignores all my other files (eg. pages/index.js).

My next.config.js looks like this:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (dev) {
      config.module.rules.push({
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      })
    }
    return config
  },
}

and .eslintrc.js looks like this:

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:remended",
        "plugin:react/remended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": 0,
        "react/react-in-jsx-scope": 0
    }
};

Is there a sample project somewhere that demonstrates setting up eslint with Next.js? Eslint is pretty much the standard for any modern JS web application, so I'm surprised to find no mention of eslint in the docs or any of the demo projects.

• javascript
• reactjs
• webpack
• eslint
• next.js

Share Improve this question Follow asked Jan 2, 2020 at 3:41 Jeremy BernierJeremy Bernier 2,21211 gold badge2020 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I was actually able to achieve the lint on dev mode using the npm concurrenly package with eslint-watch.

Doing this, my mands looks like (in package.json) :

"scripts": {
    "dev": "concurrently \"npm run lint-js:watch\" \"npm run lint-md:watch\" \"next dev\"",
    "build": "next build",
    "start": "next start",
    "lint-md": "remark .",
    "lint-md:watch": "remark --watch .",
    "lint-js": "eslint -c ./.eslintrc --ignore-path ./.eslintignore ./src",
    "lint-js:watch": "esw -w -c ./.eslintrc --ignore-path ./.eslintignore"
  }

Hope that will help!

Ok I figured out the problem, next.js in dev mode doesn't actually lint any pages until you try to load them in your browser. So if you have linting errors on pages/index.js, you won't actually see them until you load your homepage in the browser. https://github./zeit/next.js/issues/9904

本文标签： javascriptNextjsEslint is not linting any pages in dev mode (aside from pagesappjs)Stack Overflow