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

※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直すの面倒だから、先に入れておこう