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

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

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

---

谢谢。

要在浏览器中输出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文件中

---

为什么不使用您的IDE或您正在使用的任何东西来显示它们呢？这很好，但我更喜欢vue体验。