解决Vue项目中使用ESLint解析TypeScript时的Unexpected token错误

在Vue项目开发过程中，当结合使用ESLint和TypeScript时，开发者经常会遇到"Parsing error: Unexpected token"这样的语法解析错误。这类问题通常出现在.vue文件中使用了TypeScript语法但配置不正确的情况下。

问题背景

当在Vue单文件组件(SFC)中使用TypeScript时，ESLint默认的JavaScript解析器无法正确处理TypeScript特有的语法结构，如类型注解、接口定义等。这会导致解析器在遇到这些语法时抛出Unexpected token错误。

根本原因

出现这个问题的核心原因是ESLint没有正确配置使用Vue的TypeScript解析器。默认情况下，ESLint使用其内置的JavaScript解析器，而我们需要明确告诉它使用能够同时处理Vue和TypeScript语法的专用解析器。

解决方案

要解决这个问题，需要在ESLint配置中明确指定使用vue-eslint-parser作为主解析器，同时配置@typescript-eslint/parser来处理TypeScript语法。具体配置方式如下：

// eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/strongly-recommended"],
  {
    languageOptions: {
      globals: globals.browser,
      parser: require('vue-eslint-parser'),
      parserOptions: {
        parser: require('@typescript-eslint/parser'),
        extraFileExtensions: ['.vue']
      }
    },
    rules: {
      "@typescript-eslint/no-unused-vars": "warn",
      "no-unused-vars": "warn",
      "no-undef": "error"
    }
  }
];

配置解析

1. 主解析器(vue-eslint-parser)：负责解析.vue文件的整体结构，包括template、script和style三个部分。

2. 子解析器(@typescript-eslint/parser)：专门处理script部分中的TypeScript代码。

3. extraFileExtensions：告诉ESLint除了.ts文件外，还要处理.vue文件中的TypeScript代码。

最佳实践

1. 确保项目中安装了所有必要的依赖：

   • eslint
   • typescript
   • vue-eslint-parser
   • @typescript-eslint/parser
   • @typescript-eslint/eslint-plugin
   • eslint-plugin-vue

2. 对于大型项目，建议将配置拆分为多个文件，便于维护。

3. 定期更新这些依赖包，以获得最新的语法支持和错误修复。

常见问题排查

如果按照上述配置后仍然出现解析错误，可以检查以下几点：

1. 确认所有相关包的版本兼容性
2. 检查项目中是否存在多个ESLint配置文件冲突
3. 确保.vue文件中的script标签有正确的lang属性：<script lang="ts">

通过正确配置ESLint解析器，开发者可以在Vue项目中无缝使用TypeScript，同时享受ESLint提供的代码质量检查功能，提高开发效率和代码质量。