使用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 文件中