ESLintとPrettierの設定をしっかり理解する

JavaScript(React)などの開発では、ESLint と Prettier の導入は必須と言っていいほど使われています。

しかし、実際にこれを使うとき、初期のプロジェクト立ち上げの時以外は、細かな設定を考えることなく「構文チェックしてくれてるな」という感覚で使っていました。

そろそろ、しっかりと理解する時が来たようです...。

今回は、React+TypeScript のプロジェクトに ESLint と Prettier を導入するときの手順をまとめてみました。

ESLintとは

JavaScript のための静的解析ツールとなります。JavaScript の静的解析といえば ESLint と言えます。

静的解析ツールについては、JavaScript 以外の言語でも存在しています。

例えば、PHP で代表的なツールは「PHPStan」で、Ruby で代表的なツールは「Rubocop」です。

静的解析ツールは、プロジェクト個別のルールを定義することでそのルールに則っていないコーディングがあればエラーで教えてくれます。

致命的な不具合につながるようなものを見つけるものではありませんが、ESLint を入れておくことで、属人化したコーディングを避けることができ、品質向上が図れます。

Prettierとは

Node.js 上で動作するコードフォーマッターです。ESLint にも整形機能は存在しているのですが、不十分なところも多いですので、Prettier を使って整形します。

コードフォーマッターというのは、Visual Studio Code などのウェブ制作のエディターにも付属していますが、これらはユーザー環境に依存します。

一方、Prettier は Node.js 上で動作するため、ユーザー環境に依存することなく、プロジェクト単位でコードフォーマットを統一できます。

ESLint + Prettierの導入

まずは、ESLint を下記コマンドでインストールします。

$ yarn add -D eslint

インストールがうまくいけば、ESLint の初期化設定します。

$ yarn run eslint --init
# ? How would you like to use ESLint? … 
#   To check syntax only
# ❯ To check syntax and find problems
#   To check syntax, find problems, and enforce code style
# ? What type of modules does your project use? … 
# ❯ JavaScript modules (import/export)
#   CommonJS (require/exports)
#   None of these
# ? Which framework does your project use? … 
# ❯ React
#   Vue.js
#   None of these
# ? Does your project use TypeScript? › No / ❯ Yes
# ? Where does your code run? 
# ✔ Browser
# ✔ Node
# ? What format do you want your config file to be in? … 
# ❯ JavaScript
#   YAML
#   JSON
# The config that you've selected requires the following dependencies:
# 
# @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
# ? Would you like to install them now with yarn? › No / ❯ Yes

上記の通り、最後プラグインとして下記をインストールしています。

• eslint-plugin-react@latest
• @typescript-eslint/eslint-plugin@latest
• @typescript-eslint/parser@latest

eslint-plugin-react は、React でのルールを適用させるためのライブラリです。

ESLint は元々JavaScript 用のツールなのですが、typescript-eslint/eslint-plugin や typescript-eslint/parser を入れることで Typescript のチェックが可能となります。

TypeScript を使っているなら必須のライブラリです。

上記各問いに答え終わると、.eslintrc.jsがプロジェクト直下に生成しています。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

package.jsonにscriptを登録しておけば、yarnコマンドで実行できるようになります。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint:eslint": "eslint --fix 'src/**/*.{ts,tsx}'" ←追記
  },

コーディングスタイルの追加導入(Airbnb)

また、ESLintについては、様々なルールが存在しており、有名どころがライブラリとして準備してくれているところもあります。

宿泊サービスで有名なAirbnbがルールを提供しており、その他Googleも提供しています。

Airbnb： https://github.com/airbnb/javascript
Google： https://github.com/google/eslint-config-google

細かく説明していると時間なくなるので、今回はAirbnbのルールを利用します。

eslint-config-airbnb-typescriptの他に依存したライブラリのインストールが必要なので、合わせてインストールしていきます。

$ npm info "eslint-config-airbnb@latest" peerDependencies

{
  eslint: '^7.32.0 || ^8.2.0',
  'eslint-plugin-import': '^2.25.3',
  'eslint-plugin-jsx-a11y': '^6.5.1',
  'eslint-plugin-react': '^7.28.0',
  'eslint-plugin-react-hooks': '^4.3.0'
}

npm info ライブラリ名 peerDependenciesで依存するパッケージを調べることができます。

$ yarn add -D eslint-config-airbnb-typescript \
    eslint-plugin-import \
    eslint-plugin-jsx-a11y \
    eslint-plugin-react-hooks \

Prettier は下記コマンドでインストールします。

$ yarn add -D prettier eslint-config-prettier

Prettier のコードフォーマットルールを設定する為、package.json と同じ階層に .prettierrc.json を新規作成します。

{
  "printWidth": 100,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "endOfLine": "lf"
}

Prettier option 設定は他にも下記のようなものがあり、デフォルト値で設定されています。

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "parser": "none",
  "filepath": "none",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto"
}

連携設定

そして、両パッケージを同時に利用すると、設定周りでバッティングする可能性があります。

以下のように.eslintrc.jsに対して記述することで、ESLint と Prettier のコード整形がバッティングしないようになります。

{
  "extends": [
    .,
    .,
    "prettier" ←追記
  ]
}

VSCodeでの自動チェックと整形

そして、VSCodeでのコーディングで自動整形するようにします。

プロジェクトに、.vscode/settings.jsonのフォルダ構成でsettings.jsonファイルを作成して、ファイルを保存したときにPrettierのフォーマッターが実行されるように設定をします。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

ちなみに全てのファイルでprettierが動くと変な整形になることもあります。

その時は、ファイル種別ごとに指定が可能です。

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },