忽略或防止 ESLint 错误在 React 项目（create-react-project）中破坏构建

Question

忽略或防止 ESLint 错误在 React 项目（create-react-project）中破坏构建

reactjswebpackwebpack-2eslinteslintrc

52

最近我用 create-react-project 创建了一个项目。

问题是，在开发过程中，每当 ESLint 出现问题时，构建就会失败并且无法编译代码。

我能否在保持构建运行的同时仍然运行ESLint，并报告稍后修复的错误？

- R01010010

6个回答

25

只需在您的.env文件中添加DISABLE_ESLINT_PLUGIN=true即可。

干杯！

- janadari ekanayaka

2

或者 DISABLE_ESLINT_PLUGIN=true npm run build。 - VityaSchel

2

我收到了这条信息，你有什么想法？'DISABLE_ESLINT_PLUGIN'未被识别为内部或外部命令。 - Karma Blackshaw

使用命令 npm config set script-shell "C:\path\to\bash.exe" 可以告诉 npm 使用 bash 而不是 cmd。 - Annan Yearian

5

由于eslint-loader现已过时，create-react-app中现在使用eslint-webpack-plugin，请查看文档。我能通过向eslint-webpack-plugin添加两个选项来解决类似的问题。

在弹出你的React应用程序后，请将这些选项添加到ESLintPlugin选项中：

      new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        failOnError: false,  <== `This one`
        emitWarning: true,  <== `And this one`
        // ESLint class options
        cwd: paths.appPath,
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
          extends: [require.resolve('eslint-config-react-app/base')],
          rules: {
            ...(!hasJsxRuntime && {
              'react/react-in-jsx-scope': 'error'
            })
          }
        }
      })

- Ali Aljarah

6

如果我不想弹出，该怎么办？ - loxosceles

我尝试了一些解决方案，但并没有解决问题。其中一个方法是隐藏代码内部的警告，而只在终端上显示它，但这对我来说并不适合，因为我希望错误和警告出现在代码中。 - Ali Aljarah

4

如果您想在2021年解决这个问题，您可以在.env.development文件中设置以下内容以忽略TypeScript错误。

TSC_COMPILE_ON_ERROR=true

来源: https://create-react-app.dev/docs/advanced-configuration/#:~:text=TSC_COMPILE_ON_ERROR

另外，要忽略ESLint错误，请使用craco来覆盖eslint-webpack-plugin的默认配置以在开发环境中忽略错误。

const eslintWebpackPlugin = require("eslint-webpack-plugin");
const process = require("process");
module.exports = {
  webpack: {
    configure: (config) => {
      config.plugins.forEach((plugin) => {
        if (plugin instanceof eslintWebpackPlugin) {
          // Ignore ESLint Errors.
          plugin.options.failOnError = process.env.NODE_ENV === "production";
        }
      });
      return config;
    },
  },
};

- Hariom Balhara

这真的是一个糟糕的解决方案，因为我们使用TypeScript的原因就是在编译阶段抛出错误！ - Tamer Durgun

这就是为什么该解决方案建议在非生产模式下执行。 - Hariom Balhara

1

在开发阶段应该出现编译错误，以防止错误的代码进入生产阶段。难道你不会在开发后提交更改吗？ - Tamer Durgun

1

当你在开发东西时，你可能希望得到即时反馈，而不是被卡在解决TS错误上（当你已经知道代码还没有准备好提交或推送或准备好进行审查）。坦白地说，这是开发人员的偏好。 - Hariom Balhara

3

可能我回答晚了，但如果在.env文件中添加ESLINT_NO_DEV_ERRORS=true，则错误就会得到解决。

P.S:它适用于react script 4.0.3及以上版本。

- Vikas Bansal

-2

好的，我刚刚从我的webpack配置文件中注释掉了这些行。

  // {
  //   test: /\.(js|jsx|mjs)$/,
  //   enforce: 'pre',
  //   use: [
  //     {
  //       options: {
  //         formatter: eslintFormatter,
  //         eslintPath: require.resolve('eslint'),
  //
  //       },
  //       loader: require.resolve('eslint-loader'),
  //     },
  //   ],
  //   include: paths.appSrc,
  // },

- R01010010

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danziger · Accepted Answer

如果你想强制 ESLint 总是发出警告（不会阻止构建），而不是错误，那么你需要设置 emitWarning: true：

{
    enforce: 'pre',
    include: paths.appSrc,
    test: /\.(js|jsx|mjs)$/,
    use: [{
        loader: require.resolve('eslint-loader'),
        options: {
            formatter: eslintFormatter,
            eslintPath: require.resolve('eslint'),
            emitWarning: true,  HERE
        },
    }],
},

根据文档所述:

错误和警告

默认情况下，该加载器将自动调整错误报告，具体取决于eslint错误/警告计数。您仍然可以通过使用 emitError 或 emitWarning 选项来强制执行此行为：

emitError（默认值：false）

如果将此选项设置为 true，则加载器将始终返回错误。

emitWarning（默认值：false）

如果设置了此选项，则加载器将始终返回警告。如果您正在使用热模块替换，则可能希望在开发中启用此选项，否则更新将在出现eslint错误时被跳过。

...