一起来用 eslint 吧

在 TypeScript 中我们一直使用 tslint 来对我们的代码质量进行保障。但是 tslint 是 eslint 的子集。tslint 大概提供了 151 条基础规则,eslint 却有  249 条,更不用说 eslint 发达的生态了,提供了更多的规范代码。tslint 团队也发现了这个问题,并且决定转移到 eslint 中。

起因

在 Pro v4 的筹备中,我们增加了一个将 TypeScript 转化为 JavaScript 的 功能,转化完成之后我们跑了一遍 eslint 和 prettier 来让代码更像是人写的。结果转化完成之后的 js 代码无法通过 eslint 的检查:

比如这里:

image

还有这里:

image

结果

如果我们使用的是 eslint,这些问题应该会直接暴露。于是开始进行了调研和使用。首先在 Pro 中尝试了一把。效果很不错,具体可以看这个 PR。一鼓作气我在pro-blocks 中也加入了这个 lint。

我们将这些规则发布成了一个包   🌟🌟umi-fabric 🌟🌟, 这个库提供了 eslint ,stylelint 和 prettier 的一些预设,非常适合所有人使用。所有打开的规则都是对提升代码质量有意义的。

使用

项目中接入 umi-fabric

npm install eslint @umijs/fabric --save-dev

并且在根目录 .eslintrc.js  中做如下配置。

const fabric = require('@umijs/fabric');
module.exports = fabric.eslint;

在 vscode 中 eslint 的插件并不会默认的去 lint .ts 文件,我们需要在 settings.json  中设置

"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],

接下来就可以愉快的使用了。使用 eslint fix  一下老的 ts 代码有奇效哦。