React のコードを ESLint で検証する

はじめに

相変わらず、TODOアプリを作りながら React の勉強をしています。
JavaScript に lint ツールがあるのを知らずにコーディングしていたのですが、ESLint を使ってみて便利だったので手順をまとめておきます。
eslint.org

これで、

• セミコロンのつけ忘れ
• console.log 残したままだった〜

なんていうこととはおさらばです！

環境

OS X 10.10.5
ESLint 2.3.0

ESLintの導入

npm から ESLint をインストールします。

$ npm install --save-dev eslint
$ node_modules/.bin/eslint -v
v2.3.0

設定ファイルの作成方法

ESLint の最大の魅力は、検証項目を自由に設定出来ることです。
逆に、検証項目が多すぎて導入が大変となっては元も子もありません。

初期導入の際は --init を使って設定ファイルを作成するのが簡単です。

$ node_modules/.bin/eslint --init
❯ Answer questions about your style 
  Use a popular style guide 
  Inspect your JavaScript file(s) 

コマンドを実行すると、上の3つからいずれかを選択することとなります。

• Answer questions about your style
  ウィザード形式で作成します。
• Use a popular style guide
  GoogleやAirBnB等の既存ルールの設定を使用して作成します。

ウィザード形式

ウィザード形式では、以下の質問に答えることで設定ファイルを作成出来ます。
質問内容は中学生でも分かる英語なので、特に説明しなくても問題ないかとｗ

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? 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? Double
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON
Installing eslint-plugin-react
Successfully created .eslintrc.json file in /path/to

終了すると、.eslintrc.json が以下の内容で作成されます。

{
  "env": {
    "browser": true,
    "commonjs": 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",
      "double"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
}

既存ルール形式

Google や AirBnB、Standard のいずれからを選択します。

? Which style guide do you want to follow? 
  Google 
❯ AirBnB 
  Standard 
? What format do you want your config file to be in? JSON
Installing eslint-config-airbnb
Successfully created .eslintrc.json file in /path/to

AirBnBを選択すると、eslint-config-airbnbがインストールされ、以下の設定ファイルが作成されます。

{
    "extends": "airbnb",
    "plugins": [
        "react"
    ]
}

とてもシンプルです。

AirBnBのコーディング規約は、以下のページに詳しく説明されています。 github.com

extends は基本ルールの設定

設定ファイルに extends の設定があります。

ウィザード形式で作成されたファイルにはeslint:recommendedが指定されています。
これは、ESLint で推奨されているルールを基本として使用することを意味します。

具体的なルールは、下記ページのチェックマークが付いているものが対象となります。 eslint.org

推奨ルールの日本語訳は下記のページにてご確認下さい。
eslint-recommended.md · GitHub

とんでもない量のルールがあることがわかると思います。

基本ルールから変更したいものを rules に追記していきます。
eslint:recommended のルールでは、 console.log はエラーの対象になるので、使用したい場合は以下を rules に追記します。

  "no-console": "off"

React の設定

ウィザード形式で React を使用する選択をした場合、または AirBnB の設定ファイルを使用した場合には、eslint-plugin-reactがインストールされ、設定ファイルに以下が追加されます。

  "plugins": [
    "react"
  ],

途中で追加する場合、手動でプラグインをインストールして上記を設定ファイルに追記します。

$ npm install --save-dev eslint-plugin-react

これで、React のコードについてもルールを追記すればチェックされるようになります。

このプラグインで検証できるルールは Github に記載されています。
https://github.com/yannickcr/eslint-plugin-react

こちらもルールがそれなりにあります。
ESLint と同様、React 用の推奨ルールがあるので最初はそれを使用し、別途個別にルールをカスタマイズしていくのが良いと思います。

推奨設定を利用するためには、設定ファイルの extends にルールを追記します。

  "extends": ["eslint:recommended", "plugin:react/recommended"],

動作確認

以下内容で hello.jsx というファイルを作成します。

import React from "react";
import ReactDOM from "react-dom";

export default class HelloWorld extends React.Component {
    render() {
        return <div class="hoge">Hello World</div>;
    }
}

ReactDOM.render(
    <HelloWorld />, 
    document.getElementById("app")
);

検証を実行してみます。

$ node_modules/.bin/eslint hello.js 

/path/to/hello.js
  6:21  error  Unknown property 'class' found, use 'className' instead  react/no-unknown-property

✖ 1 problem (1 error, 0 warnings)

class なんて属性は無いので、className を使うよう警告が表示されました。

終わりに

• カンマが余計に付いていたり、付いていなかったり
• 未使用の変数が残っていたり
• インデントがずれていたり

という軽いものから、

• class 属性を使用していたり
• React の PropTypes の記載が漏れていたり

という、実行してみないと気づかないことや規約に渡って検証を行ってくれるので、かなり便利だと思います。

っていうか、もう lint ツール使わずにコーディングしたくない。

参考

http://qiita.com/mysticatea/items/f523dab04a25f617c87d https://github.com/yannickcr/eslint-plugin-react http://eslint.org/

入門 React ―コンポーネントベースのWebフロントエンド開発