ESLint 可共享配置发布,团队自定义 ESLint 规则新鲜出炉

ESLint于2013年6月份推出,至今4个年头,最新版本v4.8.0。它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如AirbnbGoogle均有一套自己的Javascript编码规范,而规范的实施背后离不开ESLint的支持。比如大名顶顶的eslint-config-airbnbeslint-config-google。为了更好的统一团队的JS编程风格和代码质量。feflow官方经过调研和探索,终于迎来了ESLint的解决方案,最核心的理念是:基于eslint:recommend做规则的定制化。

从一次生产事故说起

2017年4月13日,腾讯高级工程师小圣在做充值业务时,修改了苹果iap支付配置,将JSON配置增加了重复的key。代码发布后,有小部分使用了vivo手机的用户反馈充值页面白屏,无法在Now app内进行充值。最后问题定位是:vivo手机使用了系统自带的webview而没有使用X5内核,解析JSON时遇到重复key报错,导致页面白屏。

类似的问题其实很多: 比如变量未定义,方法被覆盖等等都会造成js代码执行时报错。那么如何避免呢?ESLint官方提供sharable config(可共享配置),前端团队可以根据自身团队情况定制ESLint规范配置。

规则定义准则

  • 不重复造轮子,基于eslint:recommend配置并改进
  • 能够帮助发现代码错误的规则,全部开启
  • 目的是团队的代码风格统一,而不是限制开发体验

eslint-config-ivweb 介绍

eslint-config-ivweb是腾讯NOW直播IVWEB团队的ESLint配置。目前发布初版,目前大约有130条规则,包含可能存在的错误、最佳实践、变量、代码风格、ES6相关等5个大的规则板块。

仓库地址:https://github.com/feflow/eslint-config-ivweb 欢迎提交issue或者PR一起参与团队规则维护

部分规则说明

包含3个信息: 最左侧是规则,中间是错误级别,右侧是解释说明含义。错误级别包含:error、warn和off三个级别。

更加详细的规则说明可以前往: 规则文档

项目接入使用

基本理念: 项目代码太多,不影响历史代码。只针对有改动的代码(.js和.jsx后缀)才进行校验。

第一步:添加或者修改.eslintrc.js 配置文件

module.exports = {
    "env": {
        "es6": true,
        "browser": true,
        "node": true
    },
    "extends": ["eslint:recommended", "ivweb"],
    "globals": {
        "__inline": true,
        "IS_SERVER": true,
        "__uri": true
    }
};

有部分eslint:recommended提到的规则在ivweb中没有提到,因此最好配合eslint:recommend一起使用。

只需要同时继承eslint:recommend 和 ivweb 即可,确保 ivweb 放置在最后。部分eslint:recommend定义的规则有点严格,ivweb里面有做定制化的修改。

第二步:增加precommit的hook和eslint-config-ivweb依赖

此处我们使用husky来管理所有的Hook,同之前的commit message校验。

{
  "name": "with-lint-staged",
  "version": "0.0.1",
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/*.{js,jsx}": [
      "eslint --fix",
      "git add"
    ]
  },
  "devDependencies": {
    "eslint": "^4.8.0",
    "eslint-config-ivweb": "^0.1.0",
    "husky": "^0.14.3",
    "lint-staged": "^4.2.3"
  }
}

答疑互动

Q: 为什么不直接使用airbnb团队的 eslint-config-airbnb? A: airbnb官方的规则过于庞大,有10多个规则文件。维护起来成本较高,选择基于轻量级的 eslint:recommend 基础之上定制团队ESLint规则更加简单,也便于维护。

Q: 我觉得eslint-config-ivweb有些规则不太合适,怎么办? A: 欢迎提交issue讨论或者直接提交PR。仓库地址:https://github.com/feflow/eslint-config-ivweb

Q: 为什么使用lint-staged? A: lint-staged只会对修改过的js文件行数进行代码规范检查,不会对所有的代码检查,更加合理和可操作。

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

QingStor 对象存储发布新版本 Python SDK

QingStor 对象存储近日发布了新版本的 Python SDK ,并开源在https://github.com/yunify/qingstor-sdk-py...

3397
来自专栏机器学习从入门到成神

Pandas使用DataFrame进行数据分析比赛进阶之路(二):日期数据处理:按日期筛选、显示及统计数据

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

601
来自专栏腾讯移动品质中心TMQ的专栏

TMQ第五期沙龙回顾|Selenium自动化测试框架

HTTP接口测试平台构建和运行 活动时间:2016年7月28日 QQ群视频交流 活动介绍: TMQ QQ群沙龙第四期分享 本次分享的主题是H...

19410
来自专栏腾讯Bugly的专栏

Android Patch 方案与持续交付

Android 不仅系统版本众多,机型众多,而且各个市场都各有各的政策和审核速度,每次发布一个版本对于开发同学来讲都是一种漫长的煎熬。相比于 iOS 两三天就能...

2755
来自专栏Java技术分享

RBAC新解:基于资源的权限管理(Resource-Based Access Control)

本文讨论以角色概念进行的权限管理策略及主要以基于角色的机制进行权限管理是远远不够的。同时我将讨论一种我认为更好的权限管理方式。 什么是角色 当说到程序的权限管理...

4166
来自专栏腾讯移动品质中心TMQ的专栏

30分钟轻松搞定代码瘦身

导语 当一个新的产品想要复用一个旧的产品的逻辑的时候,是直接把全盘的代码copy过去就可以了吗?站在功能的角度当然没问题,但是这对于新产品是相当臃肿的,因为一些...

1809
来自专栏腾讯IVWEB团队的专栏

《Node.js在CLI下的工程化体系实践》成都OSC源创会分享总结

本文作者:ivweb 程柳锋 背景: 随着开发团队规模不断发展壮大,在人员增加的同时也带来了协作成本的增加,业务项目越来越多,类型也各不相同。常见的类型有组...

4697
来自专栏腾讯移动品质中心TMQ的专栏

JAVA代码覆盖率工具JaCoCo-实践篇

上周 JAVA代码覆盖率工具JaCoCo-原理篇 简单介绍了JaCoCo其生成覆盖率的基本原理,这周的实践篇的主要内容就是将原理应用到实践中,本篇内容全部都是具...

3209
来自专栏Seebug漏洞平台

前端防御从入门到弃坑——CSP变迁

作者:LoRexxar'@知道创宇404实验室 0x01 前端防御的开始 对于一个基本的XSS漏洞页面,它发生的原因往往是从用户输入的数据到输出没有有效的过...

3746
来自专栏腾讯移动品质中心TMQ的专栏

应用宝基于Robotium自动化测试(下)

基于Robotium自动化测试(上)》一文中小编介绍了框架选择、测试环境搭建、用例编写、跨应用处理等等内容,本文将承接上文,继续介绍测试报告生成、持续集成等等相...

1736

扫码关注云+社区