前回、create-react-app で React アプリを作成したが必要最小限の構成となっていた。

快適にコーディングするため、まずは ESLint と Prettier を適用させてみたい。

環境

• VSCode 1.25.1
• Node 8.11.3

エディタは VSCode を使用する。

ESLint

yarn でガシガシいれていく。まず Standard スタイル

yarn add --dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

続いて React と JSX

yarn add --dev eslint-plugin-react eslint-plugin-jsx-a11y

そして .eslintrc.js を作成する。

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ['standard'],
  plugins: ['react', 'jsx-a11y', 'import'],
  rules: {}
}

もし VSCode でESLint拡張機能を入れていない場合は入れておこう。

すると ESLint が効くようになるので、js ファイルを開くとエラーが表示されるようになる。

Prettier

このままだとエラーは表示されるが自動的にフォーマットは掛けてくれないが、一個一個手動でエラーを潰すのは手間だ。

そこで Prettier を利用してフォーマットをかけることにする。 Prettier でフォーマットすることでいくつかのエラーは解決することができる。フォーマットに関わるエラーはこれで潰すと楽だ。

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js

同時に.eslintrc.jsも修正する。

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ['standard', 'prettier/react', 'prettier/standard'],
  plugins: ['react', 'jsx-a11y', 'import', 'prettier'],
  globals: {
    it: false
  },
  rules: {
    'react/jsx-uses-vars': 1,
    'react/jsx-uses-react': 1,
    'space-before-function-paren': 0,
    'comma-dangle': 0,
    'prettier/prettier': [
      'error',
      {
        semi: false,
        singleQuote: true,
        trailingComma: 'es5'
      }
    ]
  }
}

追加のルールには prettier のフォーマットを指定するルール他、4 つ追加している。

react/jsx-uses-vars

このルールが適用されると、以下の JSX でimport App from './App'がno-unused-varsでエラーとなってしまう。

import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

'react/jsx-uses-vars': 1とすることでこのルールを回避する。

react/jsx-uses-react

JSX 自体を有効にするため、import React from 'react'としてインポートする必要があるが、このルールが適用されるとやはりno-unused-varsとなる。

import React from 'react'

これも同様に'react/jsx-uses-react': 1でルールを回避できる。

space-before-function-paren

Standard ルールではfunction ()のように関数名と()の間にスペースが必要になる。

render () { // OK
render() {  // NG

しかし Prettier のフォーマットではここにスペースを開けてはくれない。VSCode の設定を頑張ればスペースを入れれないこともないが、できるだけシンプルに解決したいし、そもそもスペースがあろうがなかろうがあまり気にしていないので、ルール自体を無効化する。

.prettierrc.js

prettier の挙動をある程度設定するため、.prettierrc.jsも作成する。

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'es5'
}

作成すると言ったが、VSCode の場合は"prettier.eslintIntegration": true,という設定でも良い。

この設定を true にすると.eslintrc.jsを参照して Prettier が挙動を決定する。つまり上記の.eslintrc.jsのように Prettier の挙動をルールとして定義しておけば、.prettierrc.js不要で同様の挙動を取るようにすることができる。

こっちのほうがカンタンだ。

最後に VSCode でPrettier拡張機能を入れていない場合は入れておこう。これで Prettier が有効になり、フォーマットができるはずだ。

ついでに

create-react-appで生成されるコードは以下のように Component を継承しているが、Stateless Functional Component (SFC) に書き直してみる。

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
}

export default App

とはいえ以下のように関数とするだけだ

export default () => (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to React</h1>
    </header>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
  </div>
)

それほど変わっていないが、render関数が不要になったり、Componentを import しなくても良かったりするので、よりシンプルになったと思う。

さいごに

ESLint と Prettier を適用させたことで、スタイルチェックとフォーマットを使うことができるようになった。

これで安心（？）して React が書けるようになったネ！