将 eslint-webpack-plugin 添加到项目中以提供 Typescript linting

Question

我很难在我的 Webpack 项目中插入 Typescript linter。

显然eslint-loader已弃用，他们eslint-webpack-plugin作为替代方案提供。此外，我正在使用typescript-eslint/parser而不是tslint（已弃用）问题是我在内部设置的规则.eslintrc.js似乎没有得到考虑。我添加了一个简单的规则，.eslintrc在使用分号时应该会抛出错误。

export default class A {
  static yes = 'this is static'; // ";" <- should be invalidated by eslint
}

我的依赖项是：

"@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0",
"eslint": "^7.11.0",
"eslint-webpack-plugin": "^2.1.0",
"ts-loader": "^8.0.6",
"typescript": "^4.0.3",
"webpack": "^4.41.3",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"

如果我理解正确，它应该像这样工作：

                                                        # # # # # # # # # # # # # # 
@typescript-eslint/parser --> eslint-webpack-plugin --> #                         # 
      (uses eslint?)        (replaces eslint-loader)    #       webpack v4        #
                                                        #  w/ webpack-dev-server  #
       typescript         -->       ts-loader       --> #                         #
                                                        # # # # # # # # # # # # # #

旁注：我正在使用webpack-dev-server而不是webpack-cli's serve 命令，它似乎还不能与webpackv5 一起使用。

我运行以启动服务器的命令： webpack-dev-server --hot --inline

---

• 项目结构：

                                                        # # # # # # # # # # # # # # 
@typescript-eslint/parser --> eslint-webpack-plugin --> #                         # 
      (uses eslint?)        (replaces eslint-loader)    #       webpack v4        #
                                                        #  w/ webpack-dev-server  #
       typescript         -->       ts-loader       --> #                         #
                                                        # # # # # # # # # # # # # #

• webpack.config.js :

./
???? src
?    ???? index.ts
???? dist
     ???? bundle.js
     ???? index.html <- imports bundle.js

• .eslintrc.js：

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

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
    // publicPath: "/assets", // path of the served resources (js, img, fonts...)
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new ESLintPlugin({
      files: 'src/**/*.ts',
    })
  ],
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

• tsconfig.json：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  rules: {
    'semi': ['error', 'never'],
  },
  ignorePatterns: [ "dist/*" ],
}

Answer 1

我在尝试使用eslint-webpack-pluginwith.vue文件时遇到了类似的问题。

我的解决方案是使用extensions设置而不是files. 尝试这个：

new ESLintPlugin({
  extensions: ['ts']
})