ボム君.com

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
    AirBnBGoogleJavaScriptのスタイルガイドを使用できます。
  • 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",
   ......

github.com

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 のビルド時に実行させることもできます。
実際にはこう言ったビルドツールと合わせて使うと思いますが、
記事が長くなってしまうのでまた別の記事に書きます。