Help us understand the problem. What is going on with this article?

ESLintでReactを扱う

More than 5 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/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away