javascript - 使用reactjs时如何在浏览器中输出eslint错误

Question

通常我已经使用 create-react-app cli 工具设置了我的项目。
如何设置我的 ReactJS 项目以在浏览器中输出 ESLint 错误和警告。更具体地说，我希望它像 VueJS 一样输出任何 ESLint 错误和警告。

VueJS 通常会在浏览器的半透明屏幕上输出任何警告或错误，并且在您解决 ESLint 错误之前不会显示应用程序。

谢谢你。

Answer 1

要在浏览器中输出 eslint 错误，您可以使用以下插件组合 webpack.js :

...
plugins: [
  new ESLintPlugin({
    files: 'src/**/*.(js|jsx|ts|tsx)',
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    configFile: '.eslintrc.json',
    lintDirtyModulesOnly: true,
    emitError: true,
    emitWarning: true,
    failOnError: false,
    failOnWarning: false,
  }),
  new ErrorOverlayPlugin(),
  new webpack.HotModuleReplacementPlugin({}),
],
...

假设:

您使用 webpack.js 作为捆绑工具

您已配置 .eslintrc.json为您的项目

您已安装并导入 ESLintPlugin和 ErrorOverlayPlugin进入你的 webpack.js 文件