eslint是什么_一起来用 eslint 吧

4dc71245b011bf48e464af262962fc33.png

一起来用 eslint 吧

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

起因

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

比如这里:

a7952d1e1aeb75c65a30d4a69382c4b4.png

还有这里:

2f94293923c2c1e624a08f488c413145.png

结果

如果我们使用的是 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 代码有奇效哦。

查看原文​pro.ant.design
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值