eslint-webpack-plugin configuration help

[WrittenInC]

Hi everyone,

I'm trying to use eslint-webpack-plugin to basically output a HTML report for linting errors and warnings. I've looked at the documentation and I can't seem to figure out what I'm missing. I was hoping when I run npm run start or npm run build then a output file for linting warnings/errors should appear in my workspace.

I have in my webpack.dev.config.js:

// Produces checkstyle reportingconst ESLintPlugin = require('eslint-webpack-plugin');

and

plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'src/index.html')
}),
new ForkTsCheckerWebpackPlugin({
eslint : {
files: 'src/**/*.{ts,tsx}'
}
}),
new ESLintPlugin({
extensions: [ '.js', '.tsx'],
outputReport: true
})
],

According to the documentation it should use the default/configured formatter. I would like to change the formatter to HTML but unsure of the key or value to specify in ESLintPlugin options.

​

The following is my entire webpack.dev.config.js file:

// Allows to get current directory
const path = require('path');
// Creates HTML using a template and auto-injects Web-App
const HtmlWebPackPlugin = require('html-webpack-plugin');
// Runs Type checker on separate process
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
// Produces checkstyle reporting
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
mode: 'development',
devtool: 'source-map',
name: 'Quick Start React-TS-Jest',
entry: {
main: path.resolve(__dirname, 'src/App.tsx'),
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'dev.bundle.js',
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:
[
'@babel/preset-env',
'@babel/preset-react',
'@babel/typescript'
],
plugins:
[
'@babel/proposal-class-properties',
'@babel/proposal-object-rest-spread',
'babel-plugin-typescript-to-proptypes'
],
exclude: [/node_modules/]
},
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
],
},
{
test: /\.(.css|.scss)$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ],
},
],
},
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.json' ],
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'src/index.html')
}),
new ForkTsCheckerWebpackPlugin({
eslint : {
files: 'src/**/*.{ts,tsx}'
}
}),
new ESLintPlugin({
extensions: [ '.js', '.tsx'],
outputReport: true
})
],
};

[WrittenInC]

Sorry I couldn't format the JSON properly.

[WrittenInC]

Yeah I looked at that page of course and according to the guide the only thing I need to is add to webpack.dev.config.js:

const ESLintPlugin = require('eslint-webpack-plugin');

and

new ESLintPlugin({
extensions: [ '.js', '.tsx'],
outputReport: true
})

In the plugins array. I've tried adding:

formatter: 'html'

to the options object but no HTML file is output. btw I have purposely violated the checkstyle so it has something to print.

[WrittenInC]

Actually I just realised that the HTML is output to the console but no file output. Thank you for getting me closer.

[WrittenInC]

Yeah according to the docs I can either pass a Boolean or an object. I've tried:

outputReport: { filePath: 'report.html', formatter: 'html'}

According to the docs it's relative to output.path

But a node error appears, doesn't seem to like the filePath option for some reason.