Vue2.6.11+TypeScript4.5.2项目ESLint解析错误如何配置解决

根因分析 #

• 依赖版本不兼容：@typescript-eslint/parser@5.x、@typescript-eslint/eslint-plugin@5.x最低要求ESLint版本为7.0.0，你项目中使用的ESLint版本为6.7.2，版本不匹配直接导致TS语法解析失败。同时@vue/eslint-config-typescript@7.x官方适配的是@typescript-eslintv4版本，和你安装的v5版本也存在兼容冲突。
• 泛型语法识别冲突：你在debounce方法中使用的尖括号泛型语法，在解析配置不完整的场景下，ESLint会将尖括号误识别为HTML标签，触发解析错误。

修复方案 #

步骤1：调整依赖版本 #

卸载当前不兼容的@typescript-eslint相关包：

npm uninstall @typescript-eslint/eslint-plugin @typescript-eslint/parser

安装适配ESLint6、@vue/eslint-config-typescript@7.x的v4版本包：

npm install @typescript-eslint/eslint-plugin@4.x @typescript-eslint/parser@4.x --save-dev

步骤2：完善ESLint配置 #

修改eslintrc.js，补充TS解析相关配置：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    // 新增以下两行，指定tsconfig配置文件路径
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json']
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

可选：泛型语法兼容修改 #

如果不想调整依赖版本，可以将尖括号泛型写法替换为as语法，避免识别冲突：
原返回语句：

return <T>(<any>callable);

修改后：

return callable as unknown as T;

内容的提问来源于stack exchange，提问作者Mike Twain