ESLint于2013年6月份推出亭姥，至今4個(gè)年頭，最新版本v4.8.0顾稀。它是目前主流的用于Javascript和JSX代碼規(guī)范檢查的利器达罗，很多大公司比如Airbnb和Google均有一套自己的Javascript編碼規(guī)范，而規(guī)范的實(shí)施背后離不開(kāi)ESLint的支持静秆。比如大名頂頂?shù)?a target="_blank" rel="nofollow">eslint-config-airbnb和eslint-config-google粮揉。為了更好的統(tǒng)一團(tuán)隊(duì)的JS編程風(fēng)格和代碼質(zhì)量巡李。feflow官方經(jīng)過(guò)調(diào)研和探索，終于迎來(lái)了ESLint的解決方案扶认，最核心的理念是：基于eslint:recommend做規(guī)則的定制化侨拦。
從一次生產(chǎn)事故說(shuō)起
2017年4月13日，騰訊高級(jí)工程師小圣在做充值業(yè)務(wù)時(shí)蝠引，修改了蘋果iap支付配置阳谍，將JSON配置增加了重復(fù)的key。代碼發(fā)布后螃概，有小部分使用了vivo手機(jī)的用戶反饋充值頁(yè)面白屏，無(wú)法在Now app內(nèi)進(jìn)行充值鸽疾。最后問(wèn)題定位是：vivo手機(jī)使用了系統(tǒng)自帶的webview而沒(méi)有使用X5內(nèi)核吊洼，解析JSON時(shí)遇到重復(fù)key報(bào)錯(cuò)，導(dǎo)致頁(yè)面白屏制肮。
類似的問(wèn)題其實(shí)很多： 比如變量未定義冒窍，方法被覆蓋等等都會(huì)造成js代碼執(zhí)行時(shí)報(bào)錯(cuò)。那么如何避免呢豺鼻？ESLint官方提供sharable config（可共享配置）综液，前端團(tuán)隊(duì)可以根據(jù)自身團(tuán)隊(duì)情況定制ESLint規(guī)范配置。
規(guī)則定義準(zhǔn)則
- 不重復(fù)造輪子儒飒，基于eslint:recommend配置并改進(jìn)
- 能夠幫助發(fā)現(xiàn)代碼錯(cuò)誤的規(guī)則谬莹，全部開(kāi)啟
- 目的是團(tuán)隊(duì)的代碼風(fēng)格統(tǒng)一，而不是限制開(kāi)發(fā)體驗(yàn)
eslint-config-ivweb 介紹
eslint-config-ivweb是騰訊NOW直播IVWEB團(tuán)隊(duì)的ESLint配置桩了。目前發(fā)布初版附帽，目前大約有130條規(guī)則，包含可能存在的錯(cuò)誤井誉、最佳實(shí)踐蕉扮、變量、代碼風(fēng)格颗圣、ES6相關(guān)等5個(gè)大的規(guī)則板塊喳钟。
倉(cāng)庫(kù)地址：https://github.com/feflow/eslint-config-ivweb
歡迎提交issue或者PR一起參與團(tuán)隊(duì)規(guī)則維護(hù)
部分規(guī)則說(shuō)明
包含3個(gè)信息： 最左側(cè)是規(guī)則，中間是錯(cuò)誤級(jí)別在岂，右側(cè)是解釋說(shuō)明含義奔则。錯(cuò)誤級(jí)別包含：error、warn和off三個(gè)級(jí)別洁段。
更加詳細(xì)的規(guī)則說(shuō)明可以前往： 規(guī)則文檔
項(xiàng)目接入使用
基本理念： 項(xiàng)目代碼太多应狱，不影響歷史代碼。只針對(duì)有改動(dòng)的代碼（.js和.jsx后綴）才進(jìn)行校驗(yàn)祠丝。
第一步：添加或者修改.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提到的規(guī)則在ivweb中沒(méi)有提到疾呻，因此最好配合eslint:recommend一起使用除嘹。
只需要同時(shí)繼承eslint:recommend 和 ivweb 即可，確保 ivweb 放置在最后岸蜗。部分eslint:recommend定義的規(guī)則有點(diǎn)嚴(yán)格尉咕，ivweb里面有做定制化的修改。
第二步：增加precommit的hook和eslint-config-ivweb依賴
此處我們使用husky來(lái)管理所有的Hook璃岳，同之前的commit message校驗(yàn)年缎。
{
"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"
}
}
答疑互動(dòng)
Q： 為什么不直接使用airbnb團(tuán)隊(duì)的 eslint-config-airbnb？
A： airbnb官方的規(guī)則過(guò)于龐大铃慷，有10多個(gè)規(guī)則文件单芜。維護(hù)起來(lái)成本較高，選擇基于輕量級(jí)的 eslint:recommend 基礎(chǔ)之上定制團(tuán)隊(duì)ESLint規(guī)則更加簡(jiǎn)單犁柜，也便于維護(hù)洲鸠。
Q： 我覺(jué)得eslint-config-ivweb有些規(guī)則不太合適，怎么辦馋缅？
A： 歡迎提交issue討論或者直接提交PR扒腕。倉(cāng)庫(kù)地址：https://github.com/feflow/eslint-config-ivweb
Q： 為什么使用lint-staged？
A： lint-staged只會(huì)對(duì)修改過(guò)的js文件行數(shù)進(jìn)行代碼規(guī)范檢查萤悴，不會(huì)對(duì)所有的代碼檢查瘾腰，更加合理和可操作。
