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

我目前正在将一个应用程序从CRA迁移到Next.js。在使用CRA时，Eslint工作得非常出色（Eslint是现成的）

我想在Next.js应用程序中使用相同的CRA linting规则，因此我安装了

eslint config react app

。我按照NPM页面上提供的说明进行操作：

npm安装--保存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 ^4.0.8@@@

创建包含以下内容的.eslintrc.json文件：

{“扩展”：“react app”}

但是，linting既没有显示在开发控制台中，也没有显示在浏览器控制台中

---

谢谢

您可以在

包.json的
脚本
部分添加这样的命令：

“lint”：“eslint”

然后，您可以通过运行以下命令来检查eslint结果：

npm运行lint
您可以在
程序包.json的
脚本部分添加这样的命令：

“lint”：“eslint”

然后，您可以通过运行以下命令来检查eslint结果：

npm运行lint
好的，我找到了解决方案

当直接保存对文件的编辑时，我希望eslint输出显示在控制台中（就像CRA一样）。起初，我没有意识到Next.js在其网页包配置中没有指定eslint插件/加载程序，所以我通过添加我自己的插件/加载程序扩展了它们。现在一切正常，就像使用CRA时一样

我实际上使用了（尽管稍微修改了）CRA的配置，用于
eslint网页包插件
插件。如果其他人希望在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
及其依赖项（请参阅：）

最后，请注意，由于Next.js仅在开发中需要时呈现（编译）页面，因此eslint仅在页面显示在浏览器中时运行，如下所述：。这使得按照Roman的建议将以下脚本添加到package.json非常有用，如果您想对项目进行“完全扫描”

“lint”：“eslint.”
好的，所以我找到了解决方案

当直接保存对文件的编辑时，我希望eslint输出显示在控制台中（就像CRA一样）。起初，我没有意识到Next.js在其网页包配置中没有指定eslint插件/加载程序，所以我通过添加我自己的插件/加载程序扩展了它们。现在一切正常，就像使用CRA时一样

我实际上使用了（尽管稍微修改了）CRA的配置，用于
eslint网页包插件
插件。如果其他人希望在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
及其依赖项（请参阅：）

最后，请注意，由于Next.js仅在开发中需要时呈现（编译）页面，因此eslint仅在页面显示在浏览器中时运行，如下所述：。这使得按照Roman的建议将以下脚本添加到package.json非常有用，如果您想对项目进行“完全扫描”

“lint”：“eslint.”