ReactでESLintを使う
ESLintの導入
まずはnpmからESLintをインストール
$ npm install --save-dev eslint eslint-plugin-react
設定ファイルの生成
ESLint の魅力は、ルールを自由に設定出来ることです。
設定ファイルの生成は --init を使って設定ファイルを作成すると簡単です。
$ eslint --init
上のコマンドを実行すると対話形式で設定ファイルを作成できます。
$ ❯ Answer questions about your style $ Use a popular style guide $ Inspect your JavaScript file(s)
- Answer questions about your style
AirBnBやGoogleのJavaScriptのスタイルガイドを使用できます。 - Use a popular style guide
対話形式でルールを作成していきます。
今回は Answer questions about your style
を選択します。
すると以下の質問に1つずつ答えていくことになります
$ ? Are you using ECMAScript 6 features? Yes $ ? Are you using ES6 modules? Yes $ ? Where will your code run? Browser $ ? Do you use CommonJS? No $ ? Do you use JSX? Yes $ ? Do you use React Yes $ ? What style of indentation do you use? Spaces $ ? What quotes do you use for strings? Single $ ? What line endings do you use? Unix $ ? Do you require semicolons? Yes $ ? What format do you want your config file to be in? JSON
質問の後ろに書いてあるのが今回の私の入力です。
インデントやセミコロンなどの設定はお好みに応じて変更してください。
入力が完了すると、.eslintrc.json
が以下のように生成されます
{ "env": { "browser": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "indent": [ "error", 4 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] } }
設定ファイルの修正
react/jsx-uses-vars
を追加
ESLintは標準パッケージで jsx をサポートしてるのですが、
React の独自表記の部分はサポート外となっているため、
pluginを使用する必要があります。
"rules": { "react/jsx-uses-vars": 1, // ← 追加 "indent": [ "error", 2 ], "linebreak-style": [ "error", ......
ESLintの対象外のファイルを設定する
.eslintignore
というファイルを作成することでESLintの対象外のファイルを指定できます。
node_modules
ディレクトリ以下のファイルは対象外にしたいので設定します。
.eslintignore
というファイルを作成し、以下を記述
node_modules/
ここまでの設定で使っても問題はないのですが、使いやすいように少し手を加えます。
必要に応じて変更してください。
インデントをスペース2つにする
デフォルトだとインデントがスペース4つになっているので、2つに変更します。
"rules": { "indent": [ "error", 4 ], .....
上を下に変更
"rules": { "indent": [ "error", 2 ], .....
jQqueryを使用する
Ajaxなどで jQuery を使用したい場合、 最初の設定ファイルだとjQueryの使用が許可されていないため、それを許可します。
"env": { "browser": true, "es6": true },
上を下に変更
"env": { "browser": true, "es6": true, "jquery": true },
最終的な形
最終的には .eslintrc.json
ファイルは以下になります。
{ "env": { "browser": true, "es6": true, "jquery": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "react/jsx-uses-vars": 1, "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] } }
実行方法
$ node_modules/.bin/eslint hoge.jsx
gulpやgrunt, webpack のビルド時に実行させることもできます。
実際にはこう言ったビルドツールと合わせて使うと思いますが、
記事が長くなってしまうのでまた別の記事に書きます。