忽略或防止 ESLint 错误破坏 React 项目中的构建 (create-react-project)

Posted 2023-02-22

【中文标题】忽略或防止 ESLint 错误破坏 React 项目中的构建 (create-react-project)

【英文标题】：Ignore or prevent ESLint errors from breaking the build in a React project (create-react-project)

【发布时间】：2018-06-23 06:59:44

【问题描述】：

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

问题是，在我开发过程中，每次 ESLint 出现问题时，构建都会中断并且无法编译代码。

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

【参考方案1】：

我可能会迟到答案，但如果你添加 ESLINT_NO_DEV_ERRORS=true 在.env 文件中，然后对错误进行排序。

PS：它适用于react script 4.0.3 及以上

【参考方案2】：

对于希望在 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;
    ,
  ,
;

【参考方案3】：

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

干杯！

【讨论】：

或DISABLE_ESLINT_PLUGIN=true npm run build

'DISABLE_ESLINT_PLUGIN' is not recognized as an internal or external command 我知道了，你知道吗？

【参考方案4】：

由于eslint-loader 现在已弃用，eslint-webpack-plugin 现在在create-react-app 中使用，请检查docs，我能够通过向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'
            )
          
        
      )

【讨论】：

不想弹出怎么办？

我尝试了一些解决方案，但并没有解决问题。其中之一是将警告隐藏在代码中，而应用程序只会在终端中显示它，但这并不适合我，因为我希望错误和警告出现在代码中。

【参考方案5】：

如果你想强制 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
        ,
    ],
,

As stated in the docs:

错误和警告

默认情况下，加载程序会根据 eslint 错误/警告计数自动调整错误报告。您仍然可以使用 emitError 或 emitWarning 选项强制此行为：

emitError（默认：false）

如果此选项设置为 true，Loader 将始终返回错误。

emitWarning（默认：false）

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

...

【讨论】：

请问这个放在什么文件里？

webpack.config.js

【参考方案6】：

好的，我刚刚从我的 webpack 配置中评论了这一行

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