Vue+TS开发JsonForms自定义渲染器遇Unexpected token错误排查

你遇到的Unexpected token错误，核心原因是当前ESLint配置使用的@babel/eslint-parser无法正确解析TypeScript的泛型语法（即<ControlElement>这种写法）。这个解析器主要针对ES6+语法设计，对TS的类型语法支持不足。

解决方案步骤： #

1. 安装TS专用ESLint依赖
   首先需要安装TypeScript对应的ESLint解析器和插件：

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. 修改ESLint配置文件
   替换原有配置，让ESLint既能正确解析Vue文件，又能处理TS语法：

module.exports = {
  root: true,
  env: {
    node: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@typescript-eslint/recommended'
  ],
  // 先用vue-eslint-parser处理.vue文件结构，再将script部分交给TS解析器处理
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 可根据项目需求调整TS规则，比如允许any类型（可选）
    // '@typescript-eslint/no-explicit-any': 'off'
  }
}

配置说明： #

• vue-eslint-parser：负责解析.vue文件的整体结构，将其中的<script>代码块转交给指定的TS解析器处理。
• @typescript-eslint/parser：专门处理TypeScript语法，能正确识别泛型、类型注解等TS特性。
• @typescript-eslint/recommended：启用TS相关的ESLint推荐规则，保证代码质量。

3. 验证修复
   重启ESLint服务或重新构建项目，rendererProps<ControlElement>()一行的解析错误应该会消失。

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