ESLint 解析 TypeScript 代码时遇到 "Unexpected token" 错误的解决方案

在 Vue 3 项目中使用 ESLint 检查 TypeScript 代码时，开发者可能会遇到一个常见的解析错误："Parsing error: Unexpected token"。这个错误通常发生在 <script setup lang="ts"> 区块中声明带有类型注解的函数参数时。

问题现象

当开发者在 Vue 单文件组件中编写如下 TypeScript 代码时：

function onMenu(url: string) {
    return ''
}

ESLint 会报告解析错误，指出类型注解的冒号是意外的标记。这种情况表明 ESLint 没有正确识别 TypeScript 语法。

根本原因

这个问题的根本原因是 ESLint 默认使用 Espree 作为 JavaScript 解析器，而 Espree 无法处理 TypeScript 特有的语法，如类型注解。虽然项目配置中已经包含了 typescript-eslint 的相关配置，但如果没有明确指定使用 TypeScript 专用解析器，仍然会出现解析错误。

解决方案

要解决这个问题，需要在 ESLint 配置中明确指定使用 @typescript-eslint/parser 作为解析器。这个解析器专门设计用于处理 TypeScript 语法，能够正确识别类型注解等 TypeScript 特有语法结构。

正确的配置应该包含以下关键部分：

import tsEslint from 'typescript-eslint'

export default tsEslint.config(
    // 其他配置...
    {
        languageOptions: {
            parser: '@typescript-eslint/parser',
            // 其他语言选项...
        }
    }
)

配置要点

1. 确保已安装 @typescript-eslint/parser 作为项目依赖
2. 在 ESLint 配置中明确指定该解析器
3. 对于 Vue 单文件组件，还需要确保 vue-eslint-plugin 能够与 TypeScript 解析器协同工作

最佳实践

对于 Vue 3 + TypeScript 项目，推荐使用以下工具链组合：

• @typescript-eslint/parser 作为主要解析器
• typescript-eslint 提供的推荐规则集
• eslint-plugin-vue 处理 Vue 单文件组件特有的语法

这种组合能够确保 ESLint 正确理解项目中的所有代码，包括 Vue 模板、TypeScript 类型系统和常规 JavaScript 语法。

总结

当 ESLint 在 TypeScript 代码中报告 "Unexpected token" 错误时，这通常表明解析器配置存在问题。通过正确配置 @typescript-eslint/parser，开发者可以确保 ESLint 能够正确处理 TypeScript 语法，从而获得准确的代码分析和错误检查。对于 Vue 项目，还需要特别注意单文件组件的特殊处理，确保整个工具链协同工作。