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

  • 24
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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


Lintとは


Lint

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

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

ESLint

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

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


何ができるのか


コマンドでチェック

$ eslint js/**

lint.png

「〇〇 problems」に絶望


エディタでチェック

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

vscode.png


ruleとconfig


rule

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

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

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

他にも大量に...


config

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

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

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


何がわかるのか


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

vscode.png

'connect' is defined but never used.

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


バグを見つけてくれる

err.png

'err' is not defined

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


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

img.png

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

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

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


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

purefunction.png

Component should be written as a pure function

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


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

target.png

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