iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

寫React的那些事系列 第 28

React Day28 - ESLint(2)

前一篇我們講了ESLint的整體設定方式,了解原理後,最主要還是要熟悉一下裡面的rules,如果以前沒有使用linter的習慣,一開始真的會覺得受傷,But!用久了你就會覺得自己的code變得有點優雅XD,而且嚴謹很多,再加上ESLint可以被webpack整合,直接整合在我們開發流程中,非常方便!今天就要來講一下,和webpack整合的方式,還有產生report的指令!

講了這麼多,還是要來extends一下很紅的airbnb config:eslint-config-airbnb,因為ESLint的規則實在太多,我們也可以一條一條寫,但是如果有輪子我們直接用,不用自己造輪子也是不錯的,而且它的Style Guide也非常詳盡!等到真的對coding style很有心得,可以再替團隊開發自己的一套coding style。

使用方式


先安裝eslint相關檔案:

npm install eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

註:由於在寫文章的時候,package似乎有點問題,若有遇到問題,可以手動安裝eslint-plugin-jsx-a11y的2.2.3版:npm install eslint-plugin-jsx-a11y@^2.2.3 --save-dev

我們是把eslint裝在local,如果要在CLI使用eslint指令,需要把它安裝在global,然後就可以使用指令來建立 .eslintrc 檔:

eslint --init

我們這邊手動建立 .eslintrc 檔,把相關的config先設定好,這邊extend airbnb的config,並把airbnb有用到的三個plugins設定出來:

.eslintrc

{
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ]
}

接下來,我們要使用eslint指令產生結果,我們可以把指令寫在 package.json 中:

"lint": "eslint src; exit 0"

透過執行npm run,就可以看到結果:

npm run lint

或是我們也可以透過另一個指令,設定eslint report的格式,這邊一樣寫在 package.json 中:

  • 指令 -o 後面是產生的報表路徑與檔名。
  • 指令 -f 後面是產生的報表格式,ESLint支援許多格式,也有tab可以使用喔!
"lint:report": "eslint src -o eslint-report.html -f html; exit 0"

透過執行npm run,就可以看到目錄檔案底下產生 eslint-report.html

npm run lint:report

不管是在CLI上看到錯誤還是打開html,現在都可以清楚看到錯誤的訊息,可以在ESLint上找到錯誤訊息相關的詳細描述。覺得玻璃心有點受傷,因為跑出了一大堆錯誤訊息呀!XD目前我的檔案只有一隻完全pass,產生了283個錯誤!不過,有大部份都是因為空白格式和airbnb style設定的方式不同,晚一點可以來修改config,讓他們pass XD,當然也有一些是真的要調整的style,待會一起修正!

與Webpack整合


之前我們有介紹到webpack的loaders,ESLint就是放在preLoaders的地方,在bundle之前先用eslint-loader來檢查我們的程式碼是否可以pass,如果有問題webpack會停止bundle的過程,直到我們把有問題的地方修正!

先安裝eslint-loader:

npm install eslint-loader --save-dev

webpack.config.js 設定preLoaders:

module: {
  preLoaders: [
    {
      test: /\.js?$/,
      loader: 'eslint',
      include: path.resolve(__dirname, 'src'),
      exclude: /node_modules/
    }
  ],
  // ...
}

接下來,我們可以執行develop或是production的script:

npm run dev
// or
npm run prod

不管是哪一個,都會出現eslint的錯誤訊息,直到我們修正它!而我們在plugins也加上了NoErrorsPlugin,所以當bundle過程有錯誤時,並不會覆蓋前一個版本穩定的bundle.js,這就是結合webpack很方便的地方,透過loaders和plugins,讓我們更容易管理build的流程。

修正ESLint錯誤訊息


#comma-dangle

這應該是最容易被挑出的問題,通常我們在寫object或是array時,最後一筆不用加逗號,不過在ES6中是可以加逗號的,因為version control的關係,當資料要新增一筆時,diff通常會因為新增一個逗號變成兩行,但真正有意義被修改的只有一行,這讓diff比對顯得較為複雜一點點。所以這個規範,是希望最後一筆都要加逗號,這邊因為個人偏好的關係,這邊我要覆蓋它的rule:

"rules": {
  "comma-dangle": ["error", "never"]
}

#indent

這是指縮排的方式,可以從錯誤訊息發現,目前todos範例檔案都是使用4個空白做縮排,而airbnb的config是使用2個空白,所以我希望覆蓋這個rule:

"rules": {
  "comma-dangle": ["error", "never"],
  "indent": ["error", 4]
}

我們使用的react config,react/jsx-indent也有相同問題,所以一起修改設定:

"rules": {
  "comma-dangle": ["error", "never"],
  "indent": ["error", 4],
  "react/jsx-indent": ["error", 4]
}

#no-underscore-dangle

這邊也是個人偏好的問題,我想使用帶有底線的函式名稱來區分自己定義的函式與內建的,所以這邊也可以設定關閉:

"rules": {
  "comma-dangle": ["error", "never"],
  "indent": ["error", 4],
  "no-underscore-dangle": "off",
  "react/jsx-indent": ["error", 4]
}

#no-undef

在檔案中我使用到document這個global變數,雖然也可以特別自己定義global變數,但我們也可以在環境中指定為browser,自動把document設定全域變數:

"env": {
  "browser": true
}

#react/prefer-stateless-function

在React官網其實有提到,當component沒有state,單純只是依照props來做render時,最好寫成stateless component的方式,這樣效能會更佳,所以這邊我把components/Filter.js和components/Loading.js做改寫。

前面因為想說明常遇到的rules,並且介紹覆蓋rules的方式,所以稍微列出幾個rules。後面我有陸續修正其他相關rules,像是react/prop-typesreact/jsx-filename-extensionspace-before-blocks...等,這邊就不一一說明囉!我們也可以在hot reload時使用,一邊修改問題一邊看到error變少,等到ESLint error都修正完畢,webpack才能正常bundle出檔案!

我們已經學會使用ESLint讓code更有品質,更上一層樓,是不是很棒!目前修正完畢的code已經更新到Git 上囉!


上一篇
React Day27 - ESLint(1)
下一篇
React Day29 - Redux Testing(1)
系列文
寫React的那些事31

尚未有邦友留言

立即登入留言