Vue+TypeScript项目ESLint报interface解析错误求助

我有一个Vue项目，在.ts文件中定义了如下接口：

export interface Task {
  id?: number;
  title: string;
  description: string;
  assigned?: string | null;
  dueDate?: Date | null;
  completedDate?: Date | null;
}

ESLint高亮interface关键字并提示Parsing error: unexpected token interface。代码可正常运行，但我希望消除所有ESLint错误。以下是package.json中devDependencies的相关部分：

"devDependencies": {
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.18.5",
    "@vitejs/plugin-vue": "^4.4.0",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.52.0",
    "eslint-plugin-vue": "^9.18.1",
    "npm-run-all2": "^6.1.1",
    "typescript": "~5.2.0",
    "vite": "^4.4.11",
    "vue-tsc": "^1.8.19"
  } 

原本以为是TypeScript与ESLint版本不兼容，但不确定是否如此。

这个错误并非版本不兼容导致，核心原因是ESLint默认无法解析TypeScript语法，需配置TypeScript专用的ESLint解析器和插件：

1. 安装必要依赖
   执行以下命令安装TypeScript ESLint相关工具：

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

2. 修改ESLint配置文件
   在项目根目录的.eslintrc.cjs（或.eslintrc.js、.eslintrc.json）中更新配置：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@typescript-eslint/recommended'
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
    // 可根据项目需求添加自定义规则
  }
}

3. 确保ESLint识别.ts文件
   在package.json的scripts中明确指定ESLint检查的文件扩展名：

"scripts": {
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts"
}

4. 重启ESLint服务
   如果使用VS Code等编辑器，重启ESLint插件或编辑器，让新配置生效。

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