ESLint:Airbnb React config

Published on:

ESLint:Airbnb React config

前言

假設今天小明跟小美同居、老王住在隔壁,他們三個人同時為某間線上婚姻諮詢公司作 remote 工作。

某天 code review 時,小明赫然發現過去幾年來小美的程式碼跟老王幾乎如出一徹,一樣的排版、一樣的斷行,根本是一樣的形狀!小明內心頓覺五雷轟頂,這怎麼可能!老王都 60 歲了!難道過去幾年與小美的感情中間都插著老王的...

等等、等等,先喝口茶喘喘,讓鏡頭拉遠一點。

多虧了 JS 的廣大胸襟與自由性,一個 based on Javascript 的專案最怕的大概就是你、我、他對同一段程式寫法與排版不同的問題了,所以如果我們放眼另外一個平行世界 ---

善良的小明一心想讓小美在自己出差時寫 code 有個依據,所以替專案安裝了 Eslint;從此以後,小明終於可以放心的出差。殊不知,由於專案的關係,老王也擁有了一樣的 Eslist config,...從此以後小美就跟老王過著幸福快樂的日子。

嗯,好了,今天我們就來聊聊怎麼套用 Airbnb 的 Eslint config。

Eslint 是一套 2013 年由 Nicholas C. Zakas 開源的可熱插拔式的 lint 工具,用在 Atom/VS Code 等前端 IDE 上主要可以提供即時的 Code Style 提示與建議。嗯?你問 lint 是什麼?唉,我也不好說,請見參考資料

設定 Airbnb’s Eslint Config

首先要先說明的是,eslint-config-airbnb 包含 Airbnb 的所有 ESLint rules,含有 ECMAScript 6+ 以及 React。

個人在 React 專案上使用 eslint-config-airbnb 遇到一些 dependencies 的問題,依照幾篇教學似乎也還是有缺。後來嘗試在另個乾淨的 react native 專案中終於一次搞定,特地野人獻曝拿來寫篇文章分享。

以下是我的環境,應該會跟你的有些許不同。

環境

package.json
- react
- react-native

babelrc
- babel-plugin-syntax-async-functions
- babel-plugin-syntax-class-properties
- babel-plugin-syntax-decorators
- babel-plugin-syntax-export-extensions
- babel-plugin-syntax-object-rest-spread
- babel-plugin-syntax-trailing-function-commas
- babel-plugin-transform-async-to-generator
- babel-plugin-transform-class-properties
- babel-plugin-transform-decorators
- babel-plugin-transform-es2015-classes
- babel-plugin-transform-es2015-destructuring
- babel-plugin-transform-es2015-modules-commonjs
- babel-plugin-transform-es2015-spread
- babel-plugin-transform-es2015-sticky-regex
- babel-plugin-transform-es2015-unicode-regex
- babel-plugin-transform-exponentiation-operator
- babel-plugin-transform-export-extensions
- babel-plugin-transform-function-bind
- babel-plugin-transform-object-rest-spread

安裝 eslint-config-airbnb

不要懷疑,完整的複製貼上就對了。

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

安裝缺少的 dependencies

npm i --save-dev eslint-plugin-babel eslint-plugin-promise babel-eslint

設定 .eslintrc

在你的專案根目錄下新增一個叫做 .eslintrc 的檔案,它會讓 eslint 知道誰才是老大...,它需要套用哪些規則。以下是我的設定檔內容,你可以參考你喜歡的 rules 來手動開啟 / 關閉。

{
  "parser": "babel-eslint",
  "extends": [
    "airbnb",
    "exponent/react"
  ],
  "plugins": [
    "babel",
    "react",
    "promise",
    "jsx-a11y",
    "import"
  ],
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "react/jsx-filename-extension": [
      1, {
        "extensions": [".js", ".jsx"]
      }
    ],
    "key-spacing": [
      2, {
        "singleLine": {
          "beforeColon": false,
          "afterColon": true
        },
        "multiLine": {
          "align": "colon",
          "beforeColon": false,
          "afterColon": true
        }
      }
    ],
    "babel/generator-star-spacing": 1,
    "generator-star-spacing": 0,
    "jsx-quotes": [
      2,
      "prefer-single"
    ],
    "max-len": [
      2,
      120,
      2
    ],
    "semi": [
      2,
      "always"
    ],
    "object-curly-spacing": [
      2,
      "always"
    ],
    "react/jsx-boolean-value": [
      1,
      "always"
    ]
  }
}

下一步

恭喜!接下來安裝 Atom 的 linter-eslint,你可以在 cli 輸入以下指令安裝:

apm install linter-eslint

VS Code 的 Eslint 套件安裝位置如下,安裝完成之後效果與 Atom 類同。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
`

完成後重新開啟 Atom 應該就可以看到下圖效果,小紅點即是 Eslint 套用 config 後的 code style 提示。

什麼?你說你完全沒有小紅點?那真的是好棒棒,恭喜你 code 寫的超級 Airbnb!已經是完全是 Airbnb 的形狀啦。

Refs

Comments

comments powered by Disqus