ReactNative に ESLint を導入


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

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

## 導入方法

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

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

ESLintの初期設定

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

```bash
$ ./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`

```json:.eslintrc.json
{
    "extends": "airbnb"
}
```

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

```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にもインストール

```bash
$ apm install linter linter-eslint
```

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

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


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

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

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

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

```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を潰すのに時間がかかりそうであれば、そのままにしてよい。
- 修正のないソースは基本触らなくてよい。

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