下一步.js - Eslint 不会在开发模式下检查任何页面(页面/_app.js除外)

Question

我在使用 Next.js 设置 eslint 时遇到问题。当我运行next build时，它实际上正确地lints了我的所有文件，但是当我在开发模式(next(下运行应用程序时，eslint 实际上只pages/_app.jslints ，并且完全忽略了我的所有其他文件(例如。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 并发包和 eslint-watch

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

好的，我想出了问题所在，接下来.js在开发模式下，在您尝试在浏览器中加载任何页面之前，它们实际上不会 lint 任何页面。因此，如果您在pages/index.js上遇到 linting 错误，直到您在浏览器中加载主页，您才会真正看到它们。https://github.com/zeit/next.js/issues/9904