为什么从 CRA 迁移到 Next.js 后 eslint 不工作？

Question

我目前正在将一个应用程序从 CRA 迁移到 Next.js。 Eslint 在使用 CRA 时表现出色（eslint 开箱即用）。

我想在 Next.js 应用程序中使用相同的 CRA linting 规则，所以我安装了 eslint-config-react-app。我按照 NPM 页面上提供的说明进行操作：https://www.npmjs.com/package/eslint-config-react-app:

npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-eslint@ ^10.0.0 eslint@^7.5.0 eslint-plugin-flowtype@^5.2.0 eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20 .3 eslint-plugin-react-hooks@^4.0.8
创建包含以下内容的 .eslintrc.json 文件： { "extends": "react-app" }

但是，linting 既没有出现在开发控制台也没有出现在浏览器控制台中。

谢谢！

Answer 1

您可以在 package.json 的 scripts 部分添加这样的命令：

"lint": "eslint ."

然后您可以通过运行:

查看您的 eslint 结果

npm run lint

Answer 2

好的，所以我找到了解决方案。

我希望 eslint 输出在直接将编辑保存到文件时显示在控制台中（就像使用 CRA 一样）。最初，我没有意识到 Next.js 在他们的 webpack 配置中没有指定 eslint plugin/loader 所以我通过添加我自己的来扩展他们的。现在一切正常，就像使用 CRA 时一样。

我实际上使用（虽然略有修改）CRA 的 eslint-webpack-plugin 插件配置。如果其他人想要在 Next.js 中设置类似于 CRA 的 eslint，请将以下内容添加到您的 next.config.js 文件中：

const path = require('path');
const fs = require('fs');
const ESLintPlugin = require('eslint-webpack-plugin')

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {
    webpack(config) {
        config.plugins.push(new ESLintPlugin({
            // Plugin options
            extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
            eslintPath: require.resolve('eslint'),
            context: resolveApp('src'),
            cache: true,
            cacheLocation: path.resolve(
                resolveApp('node_modules'),
                '.cache/.eslintcache'
            ),
            // ESLint class options
            cwd: resolveApp('.'),
            resolvePluginsRelativeTo: __dirname,
            baseConfig: {
                extends: [require.resolve('eslint-config-react-app/base')],
                rules: {},
            },
        }))

        return config
    }
}

请注意，使用上述内容时，您需要安装 eslint-config-react-app 及其依赖项（参见：https://www.npmjs.com/package/eslint-config-react-app）。

最后，请注意，由于 Next.js 仅在开发中需要时才呈现（编译）页面，因此 eslint 只会运行在页面上显示在浏览器中时指出这里：https://github.com/vercel/next.js/issues/9904。如果您想对项目进行“全面扫描”，这使得按照 Roman 的建议将以下脚本添加到 package.json 非常有用。

"lint": "eslint ."

为什么从 CRA 迁移到 Next.js 后 eslint 不工作？

Why is eslint not working after migrating from CRA to Next.js?

eslint

create-react-app

next.js