ReactNative に ESLint を導入 #JavaScript

結構なボリュームになりつつあるReactNativeプロジェクトにESLintを導入した話です。

導入のきっかけ

特にコーディングルールが決まってないプロジェクトで、徐々にコード規模が大きくなり、そこに新たなメンバーが増え、気づいたらインデントがスペースだったりタブだったり...ごにょごにょごにょ...よくある話なので割愛しますが、些末なコーディングルールに神経使うのは人間の仕事じゃないよね。ということです。

導入方法

プロジェクトにインストール

# プロジェクトディレクトリ直下で
$ npm install --save-dev eslint

ESLintの初期設定

--initオプションをつけて eslint コマンドを実行すると、対話形式で質問に答えると、回答に合わせた必要なパッケージをインストールしてくれたり、設定ファイルを作ってくれます。

$ ./node_modules/.bin/eslint --init

configureどうすんねや？ときかれるので、迷わず Use a popular style guide (有名なやつ) を選びます。

? How would you like to configure ESLint?
  Answer questions about your style
❯ Use a popular style guide
  Inspect your JavaScript file(s)

どこのスタイルガイド真似るんや？ときかれるので、流行ってるぽい Airbnb を選びます。

? Which style guide do you want to follow?
  Google
❯ Airbnb
  Standard

自分React使ってるん？ときかれるので、 y(うん) と答えます。

? Do you use React? (y/N)

何形式のconfigファイルにする？ときかれるので、無難に JSON と答えます。

? What format do you want your config file to be in? (Use arrow keys)
  JavaScript
  YAML
❯ JSON

そうすると回答の内容に合わせた必要なパッケージが自動でnpmインストールされ .eslintrc.json が生成されます。

Successfully created .eslintrc.json file in /path/ReactNativeProject

最初に自動生成される .eslintrc.json

.eslintrc.json

{
    "extends": "airbnb"
}

package.json（一部省略）はこんな感じになります。

package.json

{
  "devDependencies": {
    "eslint": "^4.3.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0",
  },
}

Atomにもインストール

$ apm install linter linter-eslint

settingからファイル保存時の自動コード整形もOn。

VSCodeにもインストール

最近は Atom から VSCode に乗り換え中です。VSCode（日本語）の場合は、Command + Shift + p でパレットを出して、拡張機能のインストールを選択。ESLint と入力して、ESLint のプラグインが出てきたら「インストール」を選択。
Code > 基本設定 > 設定からファイル保存時の自動コード整形もtrue。

--fixオプションで一括変換

インデントやスペースなどの修正は --fix オプションを付けてコマンド実行すると、一括変換してくれます。

$ ./node_modules/eslint/bin/eslint.js --fix ./src/**/*.js

我がプロジェクトではこのコマンド実行で281ファイル数が変更されました。素晴らしいことに、これだけの大量の変換後も、きちんとビルドは通りましたし、アプリケーションの動作も全く問題ありませんでした。ただし変換後も、ESLint の Error の数は大量に残っていました。

ルールの調整

一括変換後に行った後は、ソースコードに現れる ESLint の Error の状況をみて、off にするルールを決めました。修正が大きいものはどんどんoffりました。そして、最終的には下記のような .eslintrc.json になりました。

.eslintrc.json

 {
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "globals": {
    "__DEV__": false
  },
  "rules": {
    "react/jsx-filename-extension": ["off"],
    "react/prop-types": ["off"],
    "react/forbid-prop-types": ["off"],
    "react/require-default-props": ["off"],
    "react/sort-comp": ["off"],
    "class-methods-use-this": ["off"],
    "no-use-before-define": ["off"],
    "import/no-extraneous-dependencies": ["error", {"devDependencies": true }],
    "max-len": ["off"],
    "no-shadow": ["off"],
    "no-nested-ternary": ["off"],
    "no-plusplus": ["off"],
    "no-multi-assign": ["off"]
  }
}

ゆるい運用方針

現状、ソースコードのいたるところに、ESLint Errorが表示されますが、無理に対応するということはしていません。

修正が入るソースと新規作成するソースに関しては、なるべくESLintの言う通りにする。
だけど、ESLintのErrorを潰すのに時間がかかりそうであれば、そのままにしてよい。
修正のないソースは基本触らなくてよい。

てな具合に、あまり気にし過ぎないようにしています。