ESLint errors/warnings should prevent compiling in React (create-react-app)

Question

I have a react project initialized with create-react-app . I integrated Airbnb Eslint rules for my project and everything works fine! But there is one more thing that I want to do: When I break a Eslint rule I want not only to show my errors/warnings in PROBLEMS tab (VSCode) but also prevent react-scripts to compile my code and display them in the terminal.

PS. I don't want to eject my project and modify webpack config but I am open to use react-app-rewired library.

So, what do you think guys, there is any workaround for my issue?

Answer 1

You could chain your linter and your compiler:

eslint "./src/**" && <<your_compiler>>

If you're using npm that can be made under scripts in package.json:

"scripts": {
"test": ...
"build": "eslint ./src/** && <<your_compiler>>",
...
}

and then execute npm run build (or npm build depending on your version)