为什么从 CRA 迁移到 Next.js 后 eslint 不起作用？答案

【问题标题】：Why is eslint not working after migrating from CRA to Next.js?为什么从 CRA 迁移到 Next.js 后 eslint 不起作用？
【发布时间】：2021-06-13 16:13:58
【问题描述】：

我目前正在将应用程序从 CRA 迁移到 Next.js。使用 CRA 时，Eslint 运行良好（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。

谢谢！

【问题讨论】：

标签： next.js create-react-app eslint

【解决方案1】：

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

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

我实际上为eslint-webpack-plugin 插件使用了（尽管稍作修改）CRA 的配置。如果其他人想在 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 ."

【讨论】：

【解决方案2】：

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

"lint": "eslint ."

然后你可以通过运行来检查你的 eslint 结果：

npm run lint

【讨论】：