ESLint React 心得 - extends Airbnb config

之前一直沒有嘗試過 JSHint、ESLint ，但隨著合作開發的人數越來越多，程式碼的風格和規範問題就更加明顯，加上最近看了聖經 Clean Code ，覺得寫出乾淨的程式碼真的很重要，剛好爬文發現有人推薦 Airbnb 釋出的 ESLint config 來做 js 和 React.js 規範，所以就決定來嘗試看看！

首先我要推薦 eslint-plugin-react 這個套件，這套件除了規範 React 的一些寫法，重要的是他還有寫 rules 的文件，告訴你為什麼建議這樣寫，只要把 eslint 上出現的錯誤訊息，拿去 google 就會找到 github 上用 markdown 寫的相關說明，跟著寫就有種 Level Up 的感覺，實在受益匪淺！

#Setup

安裝方法很簡單

先使用 npm 安裝 eslint 、 eslint-plugin-react、eslint-config-airbnb

npm install --save-dev eslint eslint-plugin-react eslint-config-airbnb

安裝後可以利用指令 init .eslintrc.js

eslint —init

透過 .eslintrc.js 這個檔案可以編輯 eslint 的規則

加入 extends airbnb 和 react plugin 就可以了

因為我有使用 es6 語法 所以需要多一個 babel 當 parser

1
2
3
4
5
6
7
8
9
10
11

/* .eslintrc.js */
module.exports = {
    "extends": "airbnb",
    "plugins": [
        "react"
    ],
    "parser": "babel-eslint",
    "rules": {
      "strict": 0
    },
};