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