ESLintでReactを扱う

めまぐるしく変更が適用されてるESLintですが
2015/4/1(v0.17)時点でReact/JSXをLintingするにはeslint-plugin-reactが便利です。

導入

ESLintとeslint-plugin-reactをインストール

npm install eslint eslint-plugin-react -g

.eslintrcの設定

最低限度ですが。

{
  "env": {
    "node": true,
    "es6: true
  },
  "ecmaFeatures": {
    "jsx": true 
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "react/jsx-uses-vars": 1
  }
}

ESLintは標準パッケージでjsxをサポートしてるのですが、React独自表記の部分はサポート外となっていて、そこはpluginでカバーする感じになっています。

例えばreact/jsx-uses-varsを無しでReact/ESLintを使うとHoge is defined but never used (no-unused-vars)とエラーが出てしまいます。
Hogeが定義されているけど使われないですよというエラーなのですが、この設定により<Hoge />と使うのを許可します。

var React = require('react' );
var Hoge = React.createElement({
  render(){
    return <span>hoge</span>;
  }
});
React.render(<Hoge />, document.querySelector("#hoge"));

その他pluginで設定できるルールについてはこちらをみてください。

単独実行

eslint hoge.jsx

自分はvimのsyntastic設定にlet g:syntastic_javascript_checkers = ['eslint']としています。

---

ESLint自体がまだ若いツールで、またすぐに仕様が変わるかもしれないので、おかしいな？と思ったら公式ブログのリリースノートをチェックするなどしてみてください。
この形式になったのもつい最近の話です。
http://eslint.org/blog/2015/03/eslint-0.17.0-released/