项目eslint配置
说一下我这个练手项目的情况，这个项目是从一个最简单的vue3项目骨架搭起来的，配置了简单的eslint代码规范检查，期间想使用typescript语法来编写代码，跟着案例写的时候用到了interface，像下面的情况：
<script lang="ts">
export default{
name: "DlHeader"
}
</script>
<script setup lang="ts">
import { withDefaults } from 'vue'
interface Props {
height?: string
}
withDefaults(defineProps<Props>(), {
height: "60px"
})
</script>
这里面用interface定义了一个我所认为的接口。然后在vue的函数中去使用它。代码跑起来没有问题，但是使用eslint执行检查的时候就报错了。
eslint --fix --ext .js,vue src/
报错内容如下：
Parsing error: The keyword 'interface' is reserved
Parsing error: The keyword 'interface' is reserved
这个错误提示意思是 interface 是Javascript为未来特性保留的关键字，我们不应该使用它。
在我对这个错误提示百度时，很不幸，国内的网站基本找不到相关问题的解释和解决方法，唯一可参考的是stackoverflow上的一个类似的问题，他的描述是这样的
下面的回答中有一个被标记为正确的解答：
这里面提到的standard也是一个代码风格检查工具，官网是：https://standardjs.com 看它的内容描述，这是一个类似eslint的东西，似乎比eslint更加简单。如果用于ts的检查，可以使用ts-standard变体。
但是这个其实不是我要的东西，按照它这个方法配置在我的vue3项目中后，也一样解决不了我的问题。
于是我想起来把我这个练手的项目和vue3官方vite插件创建出来的ts项目对比了一下，主要是对比其中的.eslintrc.json文件，这下发现了问题，官方的项目模板里其实配置了vue+typescript项目需要的插件，就是下面这些：
eslint-plugin-vue, @typescript-eslint/parser, @typescript-eslint/eslint-plugin
下面是官方的项目模板中.eslintrc.json的内容：
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:vue/essential",
"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
"semi": ["warn", "never"]
}
}
我想起来可以看一下项目中依赖的关系，于是：
npm list -depth 2
这个命令可以查看这些插件的依赖，我发现eslint-plugin-vue其实有依赖后面两个，而且这个插件查了一下是官方提供的，应该是最关键的一个切入口。
为了弄清这些插件的用途，我去npm网站上查了这些插件，总算搞明白了问题所在。
eslint-plugin-vue //官方提供的，和eslint配合使用，用于检查.vue文件中的<template>和<script>部分是否符合代码规范。
@typescript-eslint/parser //一个eslint的解析器，允许使用typescrpt ESTree来对ts代码进行规范约束。
@typescript-eslint/eslint-plugin //一个为ts代码提供约束规则的插件，需要确保项目中已安装@typescript-eslint/parser。
根据这些插件的介绍，在.eslintrc.json中正确配置以后，应该可以解决我上面遇到的问题。
我们先看eslint-plugin-vue这个官方插件，其实介绍的已经比较清楚了；
这里提到的配置方法和vite项目模板里的还稍有不同，不过比较符合我的需求，我就是要自定义一个ts的parser，最后我的配置文件变成了这样：
{
"env": {
"browser": true,
"es2021": true,
"vue/setup-compiler-macros": true
},
"extends": [
"eslint:recommended",
"plugin:vue/essential",
"plugin:@typescript-eslint/recommended"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"parser": "@typescript-eslint/parser"
},
"plugins": [
"vue"
],
"rules": {
"semi": ["warn","never"]
}
}
关键的内容就是其中的parserOptions.parser配置使用typescript语法插件的parser就可以正确识别项目中.vue文件的ts代码，根据eslint-plugin-vue官方的说明，我这里额外配置了一个vue-eslint-parser,因为如果没有这个的话，还会收到一堆新的错误提示：
Parsing error: '>' expected
但是vite项目模板里并没有配置这个，应该是其他的什么地方有些配置上的差异，等以后弄明白了再回来补充吧。
像我上面说的，如果大家使用vite创建一个vue3+ts+eslint的项目，其实不会遇到这样的问题，可能这也是网上类似这样的问题解释很少的原因吧。不过自己从头开始搞的这个项目也刚好让我可以多了解了一些eslint和vue整合的知识，也算不错。
