Блог

Я добавил eslint-webpack-plugin (v2.3.0) в свою конфигурацию webpack (v4.44.2), добавив new ESLintPlugin({ extensions: ["js", "ts", "tsx"] }) в список плагинов. Когда я запускаю webpack, все выходные данные eslint отображаются в одном файле, а все ошибки учитываются как одна ошибка:

 SomeFile.tsx
  151:3  error  warning  'var' is defined but never
                used
                @typescript-eslint/no-unused-vars   272:7   error    Include a
                description after the "// @ts-expect-error" directive to explain why
                the @ts-expect-error is necessary. The description must be 3 characters
                or longer  @typescript-eslint/ban-ts-comment   395:7   error    Include
                a description after the "// @ts-expect-error" directive to explain why
                the @ts-expect-error is necessary. The description must be 3 characters
                or longer  @typescript-eslint/ban-ts-comment   412:7   error    Include
                a description after the "// @ts-expect-error" directive to explain why
                the @ts-expect-error is necessary. The description must be 3 characters
                or longer  @typescript-eslint/ban-ts-comment   512:27  warning
                Unexpected any. Specify a different
                type
                @typescript-eslint/no-explicit-any 
                ...
                error    Unexpected 'debugger' statement           no-debugger  ✖ 107
                problems (16 errors, 91 warnings)   2 errors and 0 warnings potentially
                fixable with the `--fix` option.

✖ 1 problem (1 error, 0 warnings)
  

Как я могу получить вывод в фактическом стильном формате?

Редактировать:

конфигурация webpack:

 const path = require("path");
const { CheckerPlugin } = require("awesome-typescript-loader");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    filename: "react_frontend.js",
    path: __dirname   "...",
    library: "..."
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
    plugins: [new TsconfigPathsPlugin()],
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json", ".scss", ".css"]
  },

  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      { test: /.tsx?$/, loader: "awesome-typescript-loader" },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        enforce: "pre",
        test: /.js$/,
        loader: "source-map-loader",
        exclude: ["/node_modules/"]
      },
      {
        test: /.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
        // include: path.resolve(__dirname, '../'),
      },
      { test: /.css$/, use: ["style-loader", "css-loader"] }
    ]
  },

  plugins: [
    new CheckerPlugin(),
    new ESLintPlugin({ extensions: ["js", "ts", "tsx"] })
  ],

  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.
  externals: {
    "plotly.js": "Plotly",
    react: "React",
    "react-dom": "ReactDOM",
    "react-table": "ReactTable"
  }
};
  

конфигурация eslint:

 {
  "env": {
    "browser": true,
    "node": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": ["off"],
    "@typescript-eslint/no-var-requires": "off",
    "react/jsx-no-target-blank": ["error", { "enforceDynamicLinks": "never" }]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}