vite + vue3.x eslint 报错 `Parsing error: ‘＞‘ expected.`

问题描述

技术栈：Vue3 + Vite + Typescript + eslint

使用 yarn create vite 创建完项目之后，就想添加个 eslint，然后运行 npx eslint --init 选择 vuejs 和 Typescript 选项之后，就莫名的出现这个问题。首先问题肯定出在 eslint 身上，但是我也是选择了 Vuejs 和 Typescript 的呀，怎么就不行了呢

vue-eslint-parser

于是就搜索引擎转起来嘛，看到的答案基本就是

yarn add vue-eslint-parser -D

然后把 eslintrc.json 中的 parser 改成这个嘛

{
	...
	- "parser": "@typescript-eslint/parser",
	+ "parser": "vue-eslint-parser",
	...
}

我心想，那我的 Typescript 怎么办呢？果然，又出现了另一个问题

真的是血压高呀，我之前很少用 Typescript 写 Vue，原来这么麻烦。最后找到了终极解决方法，在 parserOptions 中配置一下 parser

{
 "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser": "@typescript-eslint/parser"
  }
 }