ESLint可共享配置发布,团队自定义ESLint规则新鲜出炉
ESLint于2013年6月份推出,至今4个年头,最新版本v4.8.0。它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如Airbnb和Google均有一套自己的Javascript编码规范,而规范的实施背后离不开ESLint的支持。比如大名顶顶的eslint-config-airbnb和eslint-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文件行数进行代码规范检查,不会对所有的代码检查,更加合理和可操作。
ESLint可共享配置发布,团队自定义ESLint规则新鲜出炉的更多相关文章
- 手模手配置Eslint,看懂脚手架中的Eslint
使用ESLint前:eslint是干嘛的,我这样写有什么问题,怎么还报错了,太麻烦想去掉这个插件,脚手架中关于eslint文件里的配置是什么意思?怎么设置配置项和规则达到自己想要的检测效果呢?怎么集成 ...
- eslint webpack2 vue-loader配置
eslint是一个代码检测工具 官网如下http://eslint.cn/ npm install eslint --save-dev 需要这几个npm包: eslint eslint-loader ...
- 小tips:使用vue-cli脚手架搭建项目,关于eslint语法检测配置
配置文件在项目根目录里,文件名以 .eslintrc.* 为名. 为了兼容以前写的代码,避免修改太多代码,把不符合自己习惯的规则去掉,简单配置代码: module.exports = { root: ...
- 🔥完美解决ESlint+Prettier各项配置冲突的语法报错问题(新手向)
本文重点: 1.解决修改了Prettier默认配置,项目内格式化无法生效 2.解决Prettier缺少配置,函数名和括号之间,自动添加空格 3.settings.json配置项分享 一个程序员,可能非 ...
- eslint使用和配置
1.全局安装 $ npm install -g eslint 2.初始化一个配置文件,得到一份文件名为 .eslintrc.js 的配置文件 eslint --init 3.配置.eslintrc.j ...
- Nacos(七):Nacos共享配置
前言 本文参考文章: SpringCloud Alibaba - Nacos Config 自定义共享配置 前景回顾: Nacos(六):多环境下如何"管理"及"隔离&q ...
- Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
本章内容 自定义属性快速入门 外化配置 自动配置 自定义创建 Starter 组件 摘录:读书是读完这些文字还要好好用心去想想,写书也一样,做任何事也一样 图 2 第二章目录结构图 第 2 章 Spr ...
- 如何实现OSM地图本地发布并自定义配图
目录 1.缘起 2.准备环境 2.1.安装linux系统 2.2.安装docker 2.3.安装Docker Compose 2.4.安装git 3.发布地图 3.1.拉取代码 3.2.测试网络 3. ...
- CAS 集群部署session共享配置
背景 前段时间,项目计划搞独立的登录鉴权中心,由于单独开发一套稳定的登录.鉴权代码,工作量大,最终的方案是对开源鉴权中心CAS(Central Authentication Service)作适配修改 ...
随机推荐
- Grails笔记三:完整的文件上传实例
文件上传在web应用中是比较普遍的,相对于使用jsp等技术实现文件上传,Grails的文件上传着实让人喜爱,因为极其简单,让人看一遍就容易轻松记住!不多说,实例如下: 假设已有一个名为uploadFi ...
- Java之JMX 详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt194 一.JMX简介 JMX是一种JAVA的正式规范,它主要目的是让程序有被 ...
- java多线程设计模式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt220 java多线程设计模式 java语言已经内置了多线程支持,所有实现Ru ...
- 利用HTML5的window.postMessage实现跨域通信
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77 HTML5的window.postMessage简述 postM ...
- C语言中复数运算及调用blas,lapack中复数函数进行科学计算
C语言中常用的数据类型主要int, float ,double ,char 等,但在科学运算中复数扮演着重要角色.这里讲下C语言中的复数运算以及如何调用blas,lapack库中的复数函数来进行科学计 ...
- (Alpha)个人总结
(Alpha)个人总结 一. 总结自己的alpha 过程 1.团队的整体情况 alpha阶段,整个团队很团结状态很好.在计划制定出来后,大家都服从安排,将该完成的工作都一一完成.虽然在课堂演示的时候又 ...
- 201521123048《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...
- [BT5]信息收集1-2 Dnsmap
0.工具介绍 dnsmap is mainly meant to be used by pentesters during the information gathering/enumeration ...
- 我的Emacs配置文件
(custom-set-variables ;; custom-set-variables was added by Custom. ;; If you edit it by hand, you co ...
- 201521123037 《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 创建自己的异常 1.自定义异常要继承已有的异常,需要手动throw异常:根据继承的异常不同以及具体情况,选择 ...