Vue项目中shims-d.vue.ts报'unexpected token module'错误如何解决？

问题根源 #

单独设置@typescript-eslint/parser时，ESLint只能识别TypeScript/JavaScript代码，无法正确解析Vue单文件组件（.vue）里的HTML模板部分，会把标签开头的<误判为正则表达式的起始符号，从而抛出“Parsing error: Unterminated regular expression literal”错误。

具体解决方法 #

1. 安装Vue专用ESLint解析器
   执行以下命令安装vue-eslint-parser（根据你的包管理器选择对应命令）：

# npm
npm install vue-eslint-parser --save-dev

# yarn
yarn add vue-eslint-parser --dev

# pnpm
pnpm add vue-eslint-parser -D

2. 修正ESLint配置文件
   修改你的.eslintrc.json（注意你之前的文件名写错了，是.eslintrc.json而非.eslintrs.json），配置双解析器：让vue-eslint-parser负责解析Vue文件整体结构，内部的TypeScript代码交给@typescript-eslint/parser处理。示例配置如下：

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended", // 若使用Vue2，替换为plugin:vue/recommended
    "@typescript-eslint/recommended"
  ]
}

3. 确保Vue ESLint插件已安装
   如果项目里还没有eslint-plugin-vue，需要一并安装，它提供了Vue组件的ESLint规则支持：

# npm
npm install eslint-plugin-vue --save-dev

# yarn
yarn add eslint-plugin-vue --dev

# pnpm
pnpm add eslint-plugin-vue -D

完成以上步骤后，重启ESLint服务（或编辑器），两个问题应该都能解决：shims-vue.d.ts里的module不再标红，Vue组件的HTML标签也不会再抛出正则解析错误。

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