webpack - eslint-webpack-plugin 没有输出文件也没有错误

Question

我正在使用 Webpack 为使用 TypeScript 的 ReactJS 应用程序设置我的开发环境。我想使用的插件之一是 ESLintPlugin，它允许我在启动开发服务器后创建 HTML 格式的类型检查报告。最终，我会将其移至我的 webpack 生产配置中。

目前，当我运行“npm run dev”但 eslint-webpack-plugin 从不输出报告时，fork-ts-checker-webpack-plugin 会向控制台打印类型错误/警告。

我的 webpack.dev.config.js 文件如下:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
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({
            failOnWarning: true,
            outputReport: {
                formatter: 'HTML',
                filePath: '../typeCheckReport.html'
            }
        })
    ],
};

我有一个 tsx 文件:

let test = 5;

它在终端中产生警告，我期待 eslint-webpack-plugin 以 HTML 格式将其输出到它没有的文件。

有没有人有什么想法？

Answer 1

修复了这些行

new ESLintPlugin({
  // Plugin options
  outputReport: {
     formatter: "HTML",
     filePath: './eslint_report.html',
  },
  extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
  eslintPath: require.resolve('eslint')
         
})

默认情况下，它还会记录到控制台