[React] React のコードを ESLint する設定

公式に configuration と eslint-plugin-react 利用のススメが書かれている。

[markdown]
> [Does ESLint support JSX?](https://github.com/eslint/eslint#does-eslint-support-jsx)

## インストール

“`prettyprinted
% npm install –save-dev eslint-plugin-react
“`

extends, ecmaFeatures, plugins を eslintrc に追記する。

“`json:.eslintrc.json
{
“extends”: [
“google”,
“plugin:react/recommended”
],
“plugins”: [
“react”
],
“env”: {
“browser”: true,
“node”: true,
“es6”: true,
“mocha”: true
},
“parserOptions”: {
“ecmaVersion”: 2015,
“sourceType”: “module”,
“ecmaFeatures”: {
“jsx”: true
}
}
}
“`

## 実行

以下のサンプルを作成して、実行する。

> [React のコードを ESLint で検証する – blog @arfyasu](http://arfyasu.hatenablog.com/entry/2016/03/06/161832)

“`javascript:sample.jsx
import React from ‘react’;
import ReactDOM from ‘react-dom’;
export default class HelloWorld extends React.Component {
render() {
return

;
}
}
ReactDOM.render(
,
document.getElementById(‘app’)
);
“`

`className=”hoge”` にしろと、エラーが表示される。

“`prettyprinted
25:17 error Unknown property ‘class’ found, use ‘className’ instead react/no-unknown-property
✖ 1 problem (1 error, 0 warnings)
“`

## 補遺

> * [ESLint 最初の一歩 – Qiita](http://qiita.com/mysticatea/items/f523dab04a25f617c87d)
[/markdown]