提到 tslint,都知道他是一个支持 typescript 语法检测和提示、保证代码的一致性和避免错误的格式检验工具。它是跟 eslint 做了同样的事情，都解析代码，生成抽象语法树，但是他们俩用了两套 AST 语法树，这也就无法直接复用 eslint 的生态下的各种产物，所以，tslint 的作者决定要转战 eslint ------>>> typescript-eslint
TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.
One advantage is there is no tooling required to reconcile differences between AST formats, but the major disadvantage is that the tool is therefore unable to reuse any of the previous work which has been done in the JavaScript ecosystem around linting, and it has to reimplement everything from scratch. Everything from rules to auto-fixing capabilities and more.
vue 开发中使用最多的 vscode 插件就是 vetur，它是一款非常好用的 vue 开发工具，提供语法高亮，分块使用嵌入式语言开发，最关键的就是语法和错误检查(lint&error check)、语法格式化(format)；但 vetur 不支持 TSLint ,所以我们如果想用 TSLint,就享受不到 vetur 带来的语法检查和 format 的福利;这也是我们废弃 tslint 的原因之一；
通常我们项目中会配置 git-hook,通过 git 提交操作，触发相关文件的校验，当 git 暂存区包含某个类型的文件时，会触发 shell 脚本，如下，触发vue-cli-service lint --no-fix和git add;
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.ts": [
"vue-cli-service lint --no-fix",
"git add"
],
"*.vue": [
"vue-cli-service lint --no-fix",
"git add"
]
}
我们希望的事，当我们使用 vue-cli-service 的 lint 功能使用 eslint 做语法检查，会检查出我们 vue 文件中 ts 模块的语法错误和不规范的语法；这时候typescript-eslint就派上用场了，这里我推荐你使用 vue 的脚手架工具创建带 prettier 和 typescript 的项目，然后参考 vue-cli 创建的.eslintrc.js文件，不管是旧项目迁移还是新项目，都建议你使用 vue 官方提供的这个 eslint 配置，为什么，因为在 Vue 老项目中，直接按照 typescript 官网给的.eslintrc.**配置方案，可能你的 vue 文件会在报很多莫名的错误，最常见的就是 module 引入的问题；
下面 po 下我用 vue-cli 初始化 ts+prettier 项目的.eslintrc.js配置文件;可以看到 vue 内部集成了@typescript-eslint 插件；
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};
还有其他几个点需要注意：
-
关于.eslintignore 的使用，可以控制 eslint 检测的范围，比 package.json 的优先级高 ---- .eslintignore 配置参考
-
关于
vscode setting.json配置，包括配置 vetur 和文本编辑器的配置editor.formatOnSave，以及 prettier 的配置，可以参考下面代码 -
{ "editor.codeActionsOnSave": { // For ESLint "source.fixAll.eslint": true, // For Stylelint "source.fixAll.stylelint": true }, // 全局使用保存自动格式化功能，vue项目关闭此项 "editor.formatOnSave": true, "diffEditor.ignoreTrimWhitespace": true, "eslint.format.enable": true, "vetur.format.defaultFormatter.pug": "prettier", // vetur 的自定义设置 "vetur.format.enable":false, // 选择 vue 文件中 template 的格式化工具 "vetur.experimental.templateInterpolationService": false, // // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true, "vetur.validation.template": false, // 添加 vue,ts 支持，官方是不推荐用这个，但是你为了是ts文件在vscode自动提示而不是文件编译才提示就必须加这个 "eslint.validate": [ "javascript", "javascriptreact", "typescript" { "language": "vue", "autoFix": true } ], // #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vue中的js按编辑器自带的ts格式进行格式化 // 如果是ts就使用prettier-eslint ，这个需要cpm // 这里提示ts没有eslint这个值。但是实测是生效的 "vetur.format.defaultFormatter.ts": "prettier-eslint", "vetur.format.defaultFormatter.js": "prettier-eslint", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-expand-multiline", "end_with_newline": false // #vue组件中html代码格式化样式 } }, } -
关于 ts shim 的配置,vue2 和 vue3 的 shim 配置还不太一样，大家自己搜，往上一大堆；这里推荐下
局部shim方式； -
具体的 rule 配置可以参考 (eslint 官网)[eslint.cn/docs/rules/]
-
vue-cli-service 没有舍弃
tsconfig.json入口配置，这一点和@typescript-eslint 官网推荐的将tsconfig.json格式化成.eslintrc不一样；//- shims-vue-d.ts import Vue from "vue"; import { AxiosInstance } from "axios"; declare module "vue/types/vue" { interface Vue { $axios: AxiosInstance; }} //- main.ts // 引入shim的ts类型； import "./shims-vue-d.ts";
我们有了 typescript-eslint，有了 vetur，有了 vue-cli 的对 typescript-lint 的支持那还等什么，来一起用起来（爬坑）啊！！！
下面是几篇 vue+eslint+typescript-eslint+vetur 的文章：
