ESLint v3.x で React 使う場合の設定メモ

• 2016-08-04 Thu: 追記・修正

(eslint v3.1.1)

Install

$ node install -g eslint eslint-plugin-react 

.eslintrc

{
  "plugins": ["react"],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "rules": {
    "react/prop-types": "warn",
    "eqeqeq": ["warn", "smart"],
    "no-console": "off",
    "no-var": "error",
    "prefer-const": "error",
    "semi": ["warn", "always"]
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

補足など

ecmaFeatures の "jsx": true すると何が変わるの？

コンポーネントのrenderのとこチェックするかどうか

class MyComponent extends React.Component {
  render() {
    retrun (
        <p> {foo}</p> // 使ってない変数。"jsx": true だとエラーになる
    )
  }
}

変数巻き上げ対応

babel通すと strict モードになって const と let は巻き上げならずにエラーになる。

    "no-var": "error",
    "prefer-const": "error",

巻き上げになる例

var hoge = "global";
 
function func() {
    console.log(hoge);  //=? undefined
    var hoge = "local";
    console.log(hoge); //=> local
}
 
func();

巻き上げならない例

"use strict"

const fuga = "global";
 
function func2() {
    console.log(fuga);  //=> エラー
    const fuga = "local";
    console.log(fuga);
}
 
func2();

es5で書くなら top-var 入れといた方がいいかも（その場合は no-var prefer-const 外す）

参考

• http://eslint.org/
• http://eslint.org/docs/rules/
• http://eslint.org/docs/user-guide/configuring#extending-configuration-files
• ESLint v2.0.0 の変更点まとめ
  • ecmaVersion: 6を記載しても、ES2015(ES6) の新しいグローバル変数は定義されません
  • できる限りparserOptionsよりもenvを使うようにしましょう。
• ESLintのエラールール。日本語ざっくり解説[ES6編] - Qiita