ESLint、Airbnbのスタイルガイドをすべて守るのは難しいね。 #JavaScript

create-react-appで生成されたApp.jsからエラー

何もしてないのにエラーが出た。

src/App.js|5 col 1 error| Component should be written as a pure function (react/prefer-stateless-function)
src/App.js|8 col 7 error| JSX not allowed in files with extension '.js' (react/jsx-filename-extension)

prefer-stateless-functionはその名の通りに状態がないコンポーネントはstateless functionを使ってくれと言う意味で、
jsx-filename-extensionはjsxフォーマットなのに拡張子が.jsxではないと言う意味である。

まずはprefer-stateless-functionについて修正してみた。

src/App.js|5 col 21 error| Missing space before function parentheses. (space-before-function-paren)

今度はfunctionの後ろに空白を入れると指摘された。
function()はダメでfunction ()にするとの話だ。

    1 import React, { Component } from 'react';
    2 import logo from './logo.svg';
    3 import './App.css';
    4
⚠   5 const App = function () {
    6   return (
    7     <div className="App">
    8       <div className="App-header">
    9         <img src={logo} className="App-logo" alt="logo" />
   10         <h2>Welcome to React</h2>
   11       </div>
   12       <p className="App-intro">
   13         To get started, edit <code>src/App.js</code> and save to reload.
   14       </p>
   15     </div>
   16   );
   17 };
   18
   19 export default App;

src/App.js|5 col 13 warning| Unexpected unnamed function. (func-names)

今度は何？、function名がない場合はfunctionを使うな！という意味らしい。
それでも今度は警告で済んだ。
警告でも嫌だから、arrow関数でやってみるか。

    1 import React, { Component } from 'react';
    2 import logo from './logo.svg';
    3 import './App.css';
    4
✗   5 const App = () => {
    6   return (
    7     <div className="App">
    8       <div className="App-header">
    9         <img src={logo} className="App-logo" alt="logo" />
   10         <h2>Welcome to React</h2>
   11       </div>
   12       <p className="App-intro">
   13         To get started, edit <code>src/App.js</code> and save to reload.
   14       </p>
   15     </div>
   16   );
   17 };
   18
   19 export default App;

src/App.js|5 col 19 error| Unexpected block statement surrounding arrow body. (arrow-body-style)

今度はエラーが出てarrowを使うならボディスタイルを守りなさいって。
ちなみに、Reactのコンソールではエラーや警告表示にならない。

これ以上手を出してもまたエラーや警告になりそうで、諦めた。
そもそもES6のclass式が好きな僕はstateless functionだと言われて修正することに違和感があった。
.jsと.jsxの拡張子の区分も要らない。

そんなわけで、.eslintrcを下記のように修正した。

"rules": {
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"]  }],
}

エラーや警告表示が消えてスッキリ!

  1 import React, { Component } from 'react';
  2 import logo from './logo.svg';
  3 import './App.css';
  4
  5 class App extends Component {
  6   render() {
  7     return (
  8       <div className="App">
  9         <div className="App-header">
 10           <img src={logo} className="App-logo" alt="logo" />
 11           <h2>Welcome to React</h2>
 12         </div>
 13         <p className="App-intro">
 14           To get started, edit <code>src/App.js</code> and save to reload.
 15         </p>
 16       </div>
 17     );
 18   }
 19 }
 20
 21 export default App;

少し冗長な感じだがいいではないか！
わかりやすいコードが一番いいのだ。