vue+eslint:由一个“Parsing error: Th

项目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上的一个类似的问题，他的描述是这样的

Stack Overflow上的类似问题

下面的回答中有一个被标记为正确的解答：

解答

这里面提到的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这个官方插件，其实介绍的已经比较清楚了；

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整合的知识，也算不错。