Eslint解析Tsx/Ts文件时public关键字报Unexpected token错误如何解决？

问题产生原因 #

• ESLint 默认使用的解析器 espree 仅支持标准 JavaScript 语法，无法识别 TypeScript 独有的类成员修饰符（public、private、protected 等），遇到这类关键字就会抛出解析错误。
• 若已经安装 TypeScript 专用 ESLint 解析器仍报错，一般是配置未生效：比如未在 ESLint 配置中指定解析器、未关联项目 tsconfig.json，或是解析器版本与项目 TypeScript 版本不兼容。

修复方案 #

步骤1：安装依赖 #

安装 TypeScript 专用的 ESLint 解析器和配套规则插件：

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

如果使用 yarn 或 pnpm 可以替换为对应包管理工具的安装命令。

步骤2：修改 ESLint 配置 #

调整项目根目录下的 ESLint 配置文件（如 .eslintrc.js、.eslintrc.json），核心配置如下：

module.exports = {
  // 指定使用TS专属解析器
  parser: '@typescript-eslint/parser',
  parserOptions: {
    // 关联项目的TS配置文件，保证解析逻辑和TS编译逻辑一致
    project: './tsconfig.json',
    ecmaVersion: 'latest',
    ecmaFeatures: {
      jsx: true // 开启TSX语法支持
    }
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended'
  ]
}

步骤3：验证修复 #

重启 IDE 的 ESLint 服务，或在命令行执行 npx eslint ./src/**/*.{ts,tsx} 检查，public 修饰符的报错应该会消失。

残留问题排查 #

如果修改配置后仍报错，可以检查两项兼容性：

• 保证 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 的版本号完全一致
• 保证解析器大版本和项目 TypeScript 大版本适配，比如 TS 5.x 对应 @typescript-eslint 6.x 及以上版本。

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