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

Question

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

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

我可以在保留构建运行的同时仍然使用 ESLint 运行并报告我稍后会修复的错误吗？

Answer 1

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

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

Answer 2

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

Errors and Warning

By default the loader will auto adjust error reporting depending on eslint errors/warnings counts. You can still force this behavior by using emitError or emitWarning options:

emitError (default: false)

Loader will always return errors if this option is set to true.

emitWarning (default: false)

Loader will always return warnings if option is set to true. If you're using hot module replacement, you may wish to enable this in development, or else updates will be skipped when there's an eslint error.

...

Answer 3

由于 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'
            })
          }
        }
      })

Answer 4

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

干杯！

Answer 5

对于想要在 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;
    },
  },
};

Answer 6

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

P.S: 适用于 react script 4.0.3 及以上

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

Ignore or prevent ESLint errors from breaking the build in a React project (create-react-project)

reactjs

webpack

webpack-2

eslint

eslintrc