Felint 好用的前端静态代码校验工具包

安宇雨 - 随手采集
2019-09-26 17:36:58
随手采集
0000-未整理-等待研究

写在最前

可能很多同学跟我原来一样，觉得前端静态代码校验无非是告诉你代码缩进等格式问题，加上本身自己写代码就比较注意格式问题，所以觉得前端代码校验没什么必要。但其实前端代码校验能带给我们的远不止这些。

第一个例子

某天我在给页面添加链接的时候写下了如下代码：

<a href="https://www.youzan.com" target="_blank">点我</a>

正当我想继续的时候，突然发现我的编辑器提醒我这行代码有错误(使用 Felint后)，提示如下：

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener (react/jsx-no-target-blank)

我才知道之前一直习惯或者以为正确的写法原来隐藏着潜在的安全问题。

第二个例子

前端领域的技术更新和迭代是非常迅速的，导致的结果是每个公司可能都会存在一些老项目，这些老项目使用老的打包技术，没有完善的 polyfill ，不允许使用js的高级语法和特性。这导致我们在维护这些老项目时需要时刻小心不能习惯性的使用一些js的高级语法。

但是人总会犯错，这种繁复一致的工作交给机器是最合适的。

所以我们最终通过设置该项目所允许的es版本，并通过一些强制检测措施，有效避免了在老项目中使用js高级语法的问题。

`Felint` 的初衷

其实从上面两个例子中可以看出，前端的静态代码检测需要做到两点：
1. 提供个工具告知你的代码格式有哪些地方可以优化，并告知你为什么应该这么优化
2. 确保不通过检查不能提交代码，而不是依靠口头约定（比如约定提交代码前要用某个工具检查下代码格式之类的）

所以 Felint 的初衷便是以上两点。

对于第一点，其实已经有非常多的工具可以做到：jsLint , jsHint , Eslint 等工具都能做到静态代码检测及错误提示。

Eslint 完善的插件机制和灵活的配置项让 Felint 选择其作为js代码检测工具，对于css，Felint 则选择使用 stylelint 作为 css 代码检测工具。

对于第二点，有些公司团队用的是 Git 服务器加钩子脚本检查的方式，这并不完美，比如：1）从提交 push 到服务器告知代码是否通过检查有等待时间，2）这意味着一刀切，如果有小伙伴去改老项目，一改就是几十个文件，没时间一次性把所有的文件都改成正确格式，那就懵逼了。

有赞前端团队的 Felint 方案借助 git hook 实现，在本地提交 commit 生效前检查代码格式，有问题就提示并终止本次 commit 提交。也可以使用 Git 本身就支持的 -n 参数，应对上提到的第二种情况。目前有赞内部绝大多数前端项目都已使用 Felint 来规范代码编写。

为什么要把 `Felint` 搞成一个正儿八经的工具产品

1. 借助 git hook 强制规范代码提交

在项目中使用 Felint 后，Felint 将对你的每次 commit 中所修改的文件进行代码校验。除非校验通过或者 commit 的时候加 -n 参数，否则 Felint 将拒绝本次 commit 。

2. 使用方便

在需要使用静态代码检测的项目工程下直接运行 felint init 命令即可。

3. 为react、vue等提供靠谱的默认 eslint stylelint 规则配置

Feint默认提供了适用于react、vue、es6、es5等应对不同应用场景的规则配置文件供使用者选择使用，大大节约了手动配置的时间。

4. 规则配置远程维护，一键更新

Felint 将规则配置文件统一放置在一个指定的单独的 git 仓库内，团队内部可以共同维护，并提供方便的命令一键更新本地工程项目内的规则配置。

5. 方便灵活的自定义规则方式

如果你对默认的规则配置不满意，则可通过 Felint 方便的对默认规则配置做微调。

6. fork `Felint` 默认配置，打造自己的规则配置

由于 Felint 将全部的默认 配置内容 单独保存在 felint-config 中，并提供自定义参数指定 配置内容 的 git 地址，这意味着你可以重新打造一份符合项目特殊需求的 Eslint 和 stylelint 插件集和配置而不必受限于 Felint 官方默认的配置。

7. 提供 CLI，方便外部调用

Felint 提供两个不同的命令行参数用于分别校验 js 和 css，举个例子，你可以写一个npm命令类似这样:

package.json

"scripts": {
    "lint": "npm install --production && felint lintjs ./src/ && felint lintcss ./src/**/*.scss"
}

每次当你运行 npm run lint 的时候，Felint 将主动检测 src 目录下的所有 js（jsx）和 scss 文件。

`Felint` 展望

围绕 Felint 的前端静态代码检测方案还有很多事情可以做。比如我们自己写了一个 Eslint 插件 eslint-plugin-youzan。该插件可以检测出前端代码中常见的错别字并提示。
非常希望得到大家的批评和建议，一起建立一个更好的 Felint。完整代码和使用指南请移步 Felint 开源项目说明

欢迎关注我们的公众号