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

倉庫地址：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文件行數進行代碼規範檢查，不會對全部的代碼檢查，更加合理和可操做。