问题描述

当我们在使用TypeScript编写的Vue单文件组件时，如果用ESLint进行代码检查，有时会出现性能很差，速度很慢的问题，在同一个项目里，.ts文件的ESLint自动修复可以瞬间完成，而Vue单文件组件光检查就要花费几秒时间甚至很久，好在我找到了原因和解决方案：

具体原因可以查看Github上的相关讨论：vue-eslint-parser and typescript-eslint problems · Issue #104 · vuejs/vue-eslint-parser (github.com)

以上的Github页面中的内容比较多，如果你只想快速解决问题，那你就直接先往下看：

解决方案

我总结了如下两个解决方案，都是亲测有效的：

方案一：删除eslintrc文件里的project字段

就像这样：

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "project": ["./tsconfig.json"] // 删除这行
    }
}

在typescript-eslint插件的官网介绍中，他会建议你使用"project": ["./tsconfig.json"]。

但是经过我的测试，似乎至少有三种可以被解析器接受的写法：

1. "project": ["./tsconfig.json"]。这是官网中介绍的写法，性能最差，Vue单文件组件检查需要大约8秒；
2. "project": "./tsconfig.json"。这是我以前的配置文件里的写法，性能也很差，但是比第一种强一点，Vue单文件组件检查需要大约5秒。我以前之所以这么写，可能是旧版官网推荐的写法；
3. 不写这一项。当我删除这一项后，我本以为会报错，然而并没有，重启编辑器也没有任何报错，同时Vue单文件组件的检查时间也从5秒降到了瞬间完成，非常神奇。

如果你必须要用到它，或者你删除后出错了，那么就使用方案二：

方案二：自定义解析器

就像这样：

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "project": ["./tsconfig.json"],
        "parser": {
            "ts": "@typescript-eslint/parser",
            "<template>": "espree"
        }
    }
}

经过我的测试，修改之后Vue单文件组件的检查时间从5秒降到了瞬间完成。更复杂的测试结果参考文章开头的Github链接。

这个方法是我从文章开头的Github链接学到的，新增这段代码的意思是：如果是.ts文件和Vue单文件组件的<script lang="ts">部分，就用@typescript-eslint/parser解析；如果是Vue单文件组件的<template>部分，就用ESLint原版的espree解析。

需要注意的是"<template>": "espree"这个字段它就是这么写的，无需任何改动，别想多了，<>不是让你往里填空的。

这么改当然也是有缺点的，而且其实一眼就能看到缺点：Vue单文件组件的<template>使用espree解析，而espree只支持JavaScript，这就意味着你不能在<template>中使用TypeScript语法的表达式，用了就会报错，只能用JavaScript表达式，而且失去了一部分类型检查，这种情况下我们只能尽量将脚本写在<script lang="ts">部分。

但是这只会影响到编辑器的开发环境，运行时<template>还是支持TypeScript的。

总结

如果你的项目中只有一个tsconfig.json，那么我觉得只要不报错，用方案一最方便，而且不会失去在<template>中写TypeScript表达式的编辑器支持。

如果你必须使用project字段，那么就使用方案二，只是会失去在<template>中写TypeScript表达式的编辑器支持。