How to output eslint errors in the browser when using reactjs

user_8926006 0
Viewed 1158

Normally i have set up my project using the create-react-app cli tool. How can i setup my ReactJS project to output ESLint errors and warnings in the browser. More specifically i want it to output any ESLint errors and warnings just like VueJS does.

VueJS will normally output any warning or error on a semi transparent screen in the browser and will not display the app until you resolve the ESLint errors.

Thank you.

eslint vue.js reactjs javascript
1 Answers

To output eslint errors in the browser you can use the following combination of plugins in 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({}),
],
...

Assumptions:

  • you use webpack.js as a bundle tool
  • you have configured .eslintrc.json for your project
  • you have installed and imported ESLintPlugin and ErrorOverlayPlugin into your webpack.js file
user_47911160
Related