[2020-06-04] tslint已死， eslint+ typescript 永生，附 vscode 折腾方案

[coppyC]

依旧是前言

之前我都是用tslint 来检查ts代码，tslint 好虽好，但是另起炉罩的 tslint 生态比起eslint 总是感觉少了点什么。

比如 react 官方的 hook 就只有 eslint 版本，毕竟人家用的 flowjs又不用 ts，干嘛要给你 tslint 版本的。

如果是之前，我是不太推荐在 eslint 配合 ts ，基本都有很多问题，属于挖东墙补西墙的行为。但是自从这个出来后，一切就变了。没错，就是这个项目，typescript-eslint，这个号称 typescript 官方与 eslint 核心成员共同开发的项目，让 eslint 能检查你的 typescript 代码，相比各种民间方案，自然是要更加可靠些。成功打通了 eslint 和 typescript 的生态圈。

这个项目主要两个包，一个是 @typescript-eslint/parser，这个包的作用是让 eslint 能解析 ts 语法，如果没有这个包，用eslint检查 typescirpt 是会报错的，类似的解析器还有万能的 babel-eslint。
另一个是 @typescript-eslint/eslint-plugin，这个包提供了很多类似 tslint 的规则，如果你不需要，这个其实不装也可以。

安装

安装包我们当然需要借助万能的npm啦，我这一个命令下去，东西就装好了[滑稽]。

yarn add -D eslint typrscript @typescript-eslint/parser @typescript-eslint/eslint-plugin

ps :我写本文的时候，除了常规的eslint typrscript，只要额外装这两个包： @typescript-eslint/parser 和@typescript-eslint/eslint-plugin
如果有变动可以参考官方的安装教程

然后执行命令 yarn eslint --init 回答一些问题，获取初始 eslint 配置文件。(中间有个问题刻选 typescript，不然就需要自己手动改成 ts 的解析器)

配合 vscode

至此其实我们就已经可以用 eslint 来检查代码了，不过要在命令行敲命令 yarn eslint src/**
这就很不即时，但我们有更好的选择，配合编辑器，即时反馈。

笔者使用的 vscode，就介绍一下vscode中怎么配置。

首先，要安装 eslint 插件，这个就不用截图吧，不懂的搜一下vscode怎么安装插件。

好，这时已经成功一半了。eslint 可以检查你的js代码，但默认是不检查ts的，所以你需要再稍稍配置一下下：
打开设置设置一下eslint.validate：

{
    "eslint.validate": [
        "javascript",
        "typescript"
    ]
}

如果你用 react 的话，还要再加个 "typescriptreact"，不然在 tsx 中不生效。
如果你还要查检 json 文件或者各种乱78糟的，也可以加上去。

现在，你已经能看到vscode的出现了各种波浪线，比如我配置的是要打分号，但代码没有打，就出现波浪线了。

那我是不是要自己打上这个分号。
emmmmm，可以，但没有必要，因为我们有更好的选择。

再打开设置

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

如此一来，一按保存键后，eslint 会自己帮你修正各种能修正的问题。
一开始可能会很不习惯，一旦接受这种设定，你就会无法自拨得试图通过保存文件来修正代码。

如果一来，我们就可以在不改变自己代码风格的前提下，配合团队的其它成员统一风格。

甚至在配合 react hook 的eslint时，你在写useEffect 都不用自己填写依赖项（第二个参数），一按保存后，自动填写。虽然有时候修正结果和预期有点偏差，但问题不大，我们还有 eslint-disable 注释来禁止某行的 eslint 。

后记

工欲善其事，必先利其器，配置好 eslint 的 vscode ，能提高我们的开发效率，更高发现问题。

目前，更成熟的 eslint 工作流程，可以搭配 pre-commit 和 lint-staged，在 git commit 时自己跑 eslint ，如果不通过则不能 commit，代码风格在团队中的统一。

当然，git commit 是可以绕过检查的，一般团队成员不会这么做，但如果是开源项目，可以设置机器人线上跪 eslint ，比如github actioons

[Dekuuuu]

😈

[coppyC]

@Dekuuuu 大佬有何指教啊？