[Firebase x React] ESLintとPrettierをReactに適用

前回、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 が書けるようになったネ!