解决Vue3+TS+ESLint下'Parsing error: ‘>‘ expected.'的ESLint错误

在使用Vue3、TypeScript和ESLint进行项目开发时，有时可能会遇到一个常见的ESLint错误：’Parsing error: ‘>‘ expected.’。这个错误是由于ESLint默认使用JavaScript解析器来检查代码，而我们的项目实际上使用的是TypeScript。为了解决这个问题，我们需要配置ESLint来使用TypeScript解析器。
解决步骤如下：

1. 首先，确保你已经安装了必要的依赖项。在你的项目根目录下，运行以下命令来安装ESLint和相关的TypeScript插件：

   npm install eslint eslint-plugin-typescript eslint-plugin-prettier --save-dev

2. 创建一个.eslintrc.js文件（如果还没有创建的话）在你的项目根目录下，并添加以下配置：

   module.exports = {
   env: {
   browser: true,
   es2021: true,
   node: true,
   },
   extends: [
   'plugin:typescript/recommended', // 使用TypeScript解析器
   'prettier', // 自动格式化代码
   'prettier/vue', // 对Vue文件进行自动格式化
   ],
   parserOptions: {
   ecmaVersion: 12, // 指定ECMAScript版本
   sourceType: 'module', // 指定源码类型（模块化或非模块化）
   },
   plugins: ['typescript', 'prettier'], // 声明插件
   rules: {
   // 在这里添加自定义规则
   },
   };

3. 在.eslintrc.js文件中，你可以根据需要添加自定义规则。例如，如果你想要求箭头函数的参数必须使用圆括号括起来，可以添加以下规则：

   module.exports = {
   // ... 其他配置 ...
   rules: {
   // ... 其他规则 ...
   'arrow-parens': 'always', // 要求箭头函数的参数必须使用圆括号括起来
   },
   };

4. 最后，运行ESLint检查你的代码。在项目根目录下，运行以下命令：

   npx eslint --ext .ts,.vue src/**/*.*

   这将检查src目录下的所有TypeScript和Vue文件，并报告任何ESLint错误或警告。
   通过以上步骤，你应该能够解决’Parsing error: ‘>‘ expected.’的ESLint错误，并开始享受使用Vue3、TypeScript和ESLint进行开发的顺畅体验。如果你遇到其他问题或需要进一步的帮助，请随时提问。