如何在浏览器屏幕上启用错误显示？

【问题标题】：How to enable error display on browser screen?如何在浏览器屏幕上启用错误显示？
【发布时间】：2020-10-11 19:12:55
【问题描述】：

我花了一些时间寻找在保存文件后（在热重载时）在浏览器屏幕上输出 ESLint 错误的解决方案。我的环境：

Webpack
ES6
Typescript

有什么解决办法？

【问题讨论】：

标签： webpack eslint webpack-dev-server eslintrc typescript-eslint

【解决方案1】：

其中一种方法是在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 文件中

【讨论】：