LoginSignup
41

More than 5 years have passed since last update.

ESLintでReactを扱う

Last updated at Posted at 2015-04-02

めまぐるしく変更が適用されてる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

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


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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41