eslint-loader failOnError 选项不适用于 ts-loader 和 webpack-dev-server

Question

抽象的

• 为了用 webpack 编译 TypeScript，我使用 ts-loader。
• 使用 webpack-dev-server 时，错误信息可能显示不正确。
• 存储库： https://github.com/pvcresin/eslint-ts-loader-error 。

问题

• eslint-loader 不停止编译，显示 ts-loader 错误。
• 即使重写了 TS 代码，ts-loader 错误仍然是旧的。

程序

1.启动dev-server： yarn start = webpack-dev-server --mode development

package.json

{
  "name": "eslint-ts-loader-error",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "2.30.0",
    "@typescript-eslint/parser": "2.30.0",
    "babel-loader": "8.0.6",
    "eslint": "6.8.0",
    "eslint-loader": "4.0.2",
    "ts-loader": "6.2.2",
    "typescript": "3.8.3",
    "webpack": "4.33.0",
    "webpack-cli": "3.3.4",
    "webpack-dev-server": "3.7.1"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
      {
        test: /\.(ts|tsx)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: [
          {
            loader: 'eslint-loader',
            options: {
              failOnError: true,
            },
          },
        ],
      },
    ],
  },
};

2. 编辑并保存.ts 文件。

主要的.ts

const a: string = 100;
console.log(a);

-> 错误：ts-loader（如预期的那样）

ts-loader: Type '100' is not assignable to type 'string'.

3. 编辑并保存.ts 文件。

const a: string = 100;
// console.log(a);

-> 错误：eslint-loader、ts-loader（意外）

eslint-loader: 'a' is assigned a value but never used  no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.

【预期】当eslint-loader出错时，停止编译，不显示ts-loader的错误。

4. 编辑并保存.ts 文件。

const a: boolean = 100;
// console.log(a);

-> 错误：eslint-loader、ts-loader（意外）

eslint-loader: 'a' is assigned a value but never used  no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.

ts-loader 错误不是最新的，是旧的！

这是否表明处理不取决于 ts-loader？

我不确定为什么会这样。

是 webpack-dev-server 而不是 eslint-loader 的问题吗？

我需要有人帮助我。

环境

• macOS Catalina v10.15.4
• Node.js v12.16.2
• npm v6.14.4
• 纱线 v1.22.4

Answer 1

在 GitHub 的问题上提问。

我使用https://github.com/webpack-contrib/eslint-webpack-plugin并且它有效：：tada：

https://github.com/webpack-contrib/eslint-loader/issues/327