Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
42
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

自分は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
42
Help us understand the problem. What are the problem?