今からReact始める人はESLint使おう

※Reactハンズオン用の資料です

---

Lintとは

---

Lint

Lint = 静的解析ツール
コードを読み込んで、自動的に評価してくれる

• バグがありそうな所が見つかる
• より良い書き方を教えてくれる
• 複数ファイルで表記の統一ができる

---

ESLint

JavaScriptには、歴史的経緯もありLintツールが数多く存在する。
(JSLint、JSHint、ESLint）

ここではJS.nextにもしっかりと対応した「ESLint」を使う（他のツールはよく知らない）。

---

何ができるのか

---

コマンドでチェック

$ eslint js/**

「〇〇 problems」に絶望

---

エディタでチェック

最近のエディタなら、対応のプラグインがある。

---

ruleとconfig

---

rule

rule = 「この記法に対してアラート出します」

rule：no-console
console.xxを使っちゃダメ

rule：default-case
switchにはdefaultをつけよう

他にも大量に...

---

config

いくつかのruleの設定をまとめたもの。偉い人の知見。

一番有名なのがeslint-config-aribnb

とりあえずこれ使っとこう

---

何がわかるのか

---

不要なコードを教えてくれる

'connect' is defined but never used.

使っていないから消していいよ。

---

バグを見つけてくれる

'err' is not defined

宣言されていない変数があるよ（errorとerrのよくある間違い）

---

Web的な正しさを教えてくれる

img elements must have an alt prop or use role="presentation".

imgタグにはaltかrole="presentation"を付けましょう

参考：role="presentation"の役割は凄い。【WAI-ARIA】

---

React的な正しさを教えてくれる

Component should be written as a pure function

renderだけのComponentはFunctionにしよう
参考：Reactの最新動向とベストプラクティス

---

セキュリティリスクを教えてくれる

_Using target="blank" without rel="noopener noreferer" is a security risk

_blankにはnoopener norefererを付けないと、セキュリティ的にマズイよ

参考：リンクのへの rel=noopener 付与による Tabnabbing 対策

---

始めかた

---

始めかた

• とりあえずeslint-config-aribnb使おう。
• 使いたくない人は「自分がAirbnbの人よりJSを書けるのか」もう一度よく考えてみよう。
• airbnbベースに、どうしてもプロジェクトに合わないruleだけ個別にdisableにする。

---

始めかた

$ npm i eslint eslint-config-airbnb -D

.eslintrcをプロジェクトルートに置く。

.eslintrc

{
  "extends": "airbnb",
  "env": {
    "browser": true
  }
}

---

使う

package.jsonにスクリプト書いておくと便利。

package.json

  "scripts": {
    "lint": "eslint src/**.js"
  }

実行。

$ npm run lint

---

ruleのカスタマイズ

• 0：無効
• 1：warning
• 2：error

.eslintrc

{
  "extends": "airbnb",
  "rules": {
    "no-alert": 0,
    "consistent-return": 1,
    "react/jsx-filename-extension": 0
  }
}

---

まとめ

• Airbnbのconfigは、単純な表記ルールだけじゃなく、「Reactとしてこう書くべき」「Webとしてこうした方が良い」というルールが満載
• 1000 Problems直すの面倒だから、先に入れておこう