For now, we have to manually run the eslint script to check our code. It would be even better if we were able to check our code when it is processed by Webpack, so it would be fully automatic. Fortunately, this is possible thanks to the eslint-loader.
- Install it in the dev dependencies alongside the friendly-errors-webpack-plugin package, which will improve the console messages:
npm i -D eslint-loader friendly-errors-webpack-plugin
Now we have to change the webpack configuration to add a new ESLint loader rule.
- Edit the webpack.config.js file and add this new rule at the top of the module.rules option:
module: {
rules: [
{
test: /.(jsx?|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
},
// ...
- Additionally, we can enable the friendly-errors-webpack-plugin package. Import it at the top of the file:
const FriendlyErrors = require('friendly-errors-webpack-plugin')
-
Then, add this plugin when we are in development mode by adding an else condition at the end of the configuration file:
} else {
module.exports.plugins = (module.exports.plugins ||
[]).concat([
new FriendlyErrors(),
])
}
Restart webpack by rerunning the dev script and remove a comma somewhere in the code. You should see the ESLint error displayed in the webpack output:
In the browser, you should now see the error overlay:
If you fix the error by putting the comma back again, the overlay will close and the console will display a friendly message:
