Next.js - Eslint 不会在开发模式下检查任何页面（pages/_app.js 除外）

Question

我在使用 Next.js 设置 eslint 时遇到问题。当我运行时，它实际上正确地对我的所有文件进行了 lints next build，但是当我在开发模式 ( ) 下运行应用程序时next，eslint 实际上仅对我的所有文件进行了 lints pages/_app.js，并完全忽略了我的所有其他文件（例如pages/index.js）。

我的next.config.js看起来像这样：

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
  },
}

看起来.eslintrc.js像这样：

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "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
    }
};

是否有一个示例项目演示使用 Next.js 设置 eslint？Eslint 几乎是任何现代 JS Web 应用程序的标准，因此我很惊讶地发现文档或任何演示项目中都没有提及 eslint。

Answer 1

实际上，我能够使用 npm concurrently包和eslint-watch在开发模式下实现 lint 。

这样做，我的命令看起来像 (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"
  }

希望这会有所帮助！

Answer 2

好吧，我找到了问题所在，开发模式下的 next.js 实际上不会对任何页面进行 lint 处理，除非您尝试将它们加载到浏览器中。因此，如果您的 上出现 linting 错误pages/index.js，则在浏览器中加载主页之前您实际上不会看到它们。https://github.com/zeit/next.js/issues/9904