VS CodeでESlint、Prettierを使用したReact環境を構築する

Reactの環境構築はcreate-react-appでとても簡単になりました。ここにコードチェック、整形ツールであるESlint、Prettier を導入してみます。

ESlint、Prettierを使用した環境構築方法やルールはプロジェクトによって違うと思うので、基本的な設定だけしています。プロジェクトに合わせて編集してください。

完成品はGitHubにアップしています。create-react-appで生成されるReactのアイコンなどは削除しています。

環境構築

それでは環境構築していきましょう！パッケージ管理にyarnを使っていきますが、npmを使用している人は便宜読み替えてください。

VS CodeにESlintとPrettierの拡張機能を追加する

VS Codeの拡張機能としてESlintをインストールしましょう。

Prettierもインストールします。

これで必要な拡張機能はインストールできました。

create-react-appでプロジェクトを作成する

Reactプロジェクトを作成しましょう。

create-react-app sample

必要なパッケージをインストールする

create-react-appで作成された雛形では、すでにESLintに関するパッケージが導入されています。

create-react-appで作成したプロジェクトの場合、eslintとbabel-eslint、eslint-loaderをインストールしたらエラーが発生するのでインストールしないください。

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

eslint、prettierの設定ファイルを生成する

プロジェクトルートに.eslintrc.jsと.prettierrc配置してルールを書いていきます。 基本的な設定だけを書いています。

.eslintrc.js

module.exports = {
  "env": {
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "plugins": [
    "react",
    "prettier"
  ],
  "parserOptions": {
    "version": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier/react"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

.prettierrc

{
  "printWidth": 120,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

VS Codeの設定でセーブ時に整形するようにする

セーブ時に整形するようにVS Codeの設定を変更しましょう。VS Codeのデフォルトのフォーマット機能をオフにしています。

 {
   "javascript.format.enable": false,
   "eslint.autoFixOnSave": true
 }

おわり

お疲れ様でした！これで設定が完了です。App.jsなどのコンポーネントの拡張子はjsxに変更しましょう。

ESlint、Prettierの設定は大変ですが、その後の開発が圧倒的に楽になるのでぜひお試しください。