ESLint可共享配置釋出,團隊自定義ESLint規則新鮮出爐

cpselvis發表於2019-03-04

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個大的規則板塊。

倉庫地址:github.com/feflow/esli…
歡迎提交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。倉庫地址:github.com/feflow/esli…

Q: 為什麼使用lint-staged?
A: lint-staged只會對修改過的js檔案行數進行程式碼規範檢查,不會對所有的程式碼檢查,更加合理和可操作。

相關文章