Edited at

ESLintでReactを扱う

More than 3 years have passed since last update.

めまぐるしく変更が適用されてるESLintですが

2015/4/1(v0.17)時点でReact/JSXをLintingするにはeslint-plugin-reactが便利です。

https://github.com/yannickcr/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

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


ESLint自体がまだ若いツールで、またすぐに仕様が変わるかもしれないので、おかしいな?と思ったら公式ブログのリリースノートをチェックするなどしてみてください。

この形式になったのもつい最近の話です。

http://eslint.org/blog/2015/03/eslint-0.17.0-released/