Vue2 TS/JS混合项目集成ESLintPlugin出现parent.eval is not a function错误排查

问题1：parent.eval is not a function报错修复 #

该错误由ESLint相关包版本兼容问题、搭配Laravel Mix全量编译逻辑冲突导致。首次启动npm run hot时ESLint会全量扫描文件，调用@typescript-eslint/parser解析TS文件时版本不匹配触发异常；修改tsconfig.json触发的增量编译会跳过全量校验逻辑，因此不会报错。
修复步骤：

• 将所有@typescript-eslint相关依赖（@typescript-eslint/parser、@typescript-eslint/eslint-plugin）统一升级到^5.62.0版本，该版本是适配Vue2的最高稳定版本，v6+版本对Vue2兼容性较差
• 调整webpack.mix.js中的ESLintPlugin配置，新增exclude: /node_modules/，同时添加extensions: ['js', 'ts', 'vue']，避免重复解析非目标文件

问题2：无lang="ts"标识的Vue文件被TS校验修复 #

该问题由.eslintrc.js的解析器配置错误导致，当前配置将所有文件的解析逻辑都交给了TS解析器，因此会对普通JS的Vue文件做类型校验。
修复步骤：
修改.eslintrc.js的parserOptions配置如下：

parserOptions: {
  parser: {
    ts: '@typescript-eslint/parser',
    tsx: '@typescript-eslint/parser',
    js: 'espree',
    jsx: 'espree',
  },
  extraFileExtensions: ['.vue']
},

同时调整tsconfig.json的include配置，避免全量扫描JS文件：

"include": [
  "resources/js/**/*.ts",
  "resources/js/**/*.tsx",
  "resources/js/**/*.vue"
],
"exclude": ["node_modules"]

问题3：TS类型Vue组件props校验不生效修复 #

该问题有两个常见诱因：

1. testts.vue的script标签未添加lang="ts"标识，PropType的类型断言不会被TS识别，类型定义自然不生效
2. Laravel Mix和ESLint默认都不会校验Vue模板中的传值类型，需要额外工具支持模板类型校验
   修复步骤：

• 确保testts.vue的script标签添加lang="ts"，且正确导入PropType和TestType类型
• 安装适配Vue2的vue-tsc依赖：npm install vue-tsc@1.8.27 -D
• 在package.json的scripts中新增命令"type-check": "vue-tsc --noEmit"，执行该命令即可触发包括模板传值在内的全量类型校验，你示例中id传字符串、缺少name字段的错误都会被正常抛出

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