結構なボリュームになりつつある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
{
"extends": "airbnb"
}
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
になりました。
{
"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を潰すのに時間がかかりそうであれば、そのままにしてよい。
- 修正のないソースは基本触らなくてよい。
てな具合に、あまり気にし過ぎないようにしています。