代码检查工具！从 TSLint 到 ESLint

2019 年 1 月，TypeScript 官方决定全面采用 ESLint，以后也发布 typescript-eslint 项目，以集中解决 TypeScript 和 ESLint 兼容性问题。而以前的两个 lint 解决方案都将弃用：javascript

typescript-eslint-parser 已中止维护
在完成 ESLint 功能后，将弃用 TSLint 并帮助用户迁移到 ESLint

TS 官方转向 ESLint 的缘由:

TSLint 执行规则的方式存在一些框架问题，从而影响性能，而修复这些问题会破坏现有的规则。
ESLint 的性能更好，而且社区用户一般拥有 ESLint 的规则配置（好比 React 和 Vue 的配置），而不会拥有 TSLint 的规则配置。

已经有 TypeScript，为何须要 ESLint ？

ts 编译器主要作类型检查和语言转换，ESLint 则能够保持代码风格的统一；二者的功能有部分重合，但也各有职责。html

可是，ESLint 处理 ts 代码会遇到一些问题？由于 ts 编译器和 ESLint 在开始各自的工做以前都会将代码转换成 AST（抽象语法树），而两种语法树是不兼容的。这时，咱们可使用 typescript-eslint 项目，它为 ESLint 提供了专门解析 ts 代码的编译器，来解决 TypeScript 和 ESLint 兼容性问题。vue

在 TypeScript 中使用 ESLint

安装

npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
复制代码

@typescript-eslint/parser为 ESLint 提供解析器。（别忘了同时安装 typescript） @typescript-eslint/eslint-plugin 它做为 ESLint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。java

建立配置文件

ESLint 须要一个配置文件来决定对哪些规则进行检查，配置文件的名称通常是 .eslintrc.js 或 .eslintrc.json。react

// .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": ["plugin:@typescript-eslint/recommended"],
  "rules": { "@typescript-eslint/no-inferrable-types": "off" }
}
复制代码

rules 的取值通常是一个数组，其中第一项是 off、warn 或 error 中的一个，表示关闭、警告和报错。后面的项都是该规则的其余配置。typescript

若是没有其余配置的话，则能够将规则的取值简写为数组中的第一项（上例中的 @typescript-eslint/no-inferrable-types）。npm

off、warn 和 error的含义以下：json

off：禁用此规则
warn：代码检查时输出错误信息，可是不会影响到 exit code
error：发现错误时，不只会输出错误信息，并且 exit code 将被设为 1（通常 exit code 不为 0 则表示执行出现错误）

检查整个项目的 ts/js 文件

// package.json
{
  ...
  "script": {
    ...
    "lint": "eslint src --ext .js,.ts"
  }
}
复制代码

npm run lint
复制代码

在 VSCode 中集成 ESLint 检查

安装 ESLint 插件，点击「扩展」按钮，搜索 ESLint，而后安装便可。数组

VSCode 中的 ESLint 插件默认是不会检查 .ts 后缀的，须要在「文件 => 首选项 => 设置 => 工做区」中（也能够在项目根目录下建立一个配置文件 .vscode/settings.json），添加如下配置：babel

{
  ...
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "html",
    "typescript"
  ]
}
复制代码

比较 babel-eslint 和 typescript-eslint

babel-eslint: 支持 TypeScript 没有的额外的语法检查，抛弃 TypeScript，不支持类型检查。
typescript-eslint: 基于 TypeScript 的 AST，支持建立基于类型信息的规则（tsconfig.json）

二者底层机制不同，不要一块儿用。Babel 体系建议用 babel-eslint，不然能够用 typescript-eslint。