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

公開日: 2016/11/12
更新日: 2018/10/09

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

Does ESLint support JSX?

インストール

% npm install --save-dev eslint-plugin-react

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

.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

sample.jsx
import React from 'react';
import ReactDOM from 'react-dom';
export default class HelloWorld extends React.Component {
  render() {
    return <div class="hoge">Hello World</div>;
  }
}
ReactDOM.render(
  <helloWorld />,
  document.getElementById('app')
);

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

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

補遺