【環境構築】ESLintとPrettierのインストール

目的

　ESLintとPrettierのインストール方法について書きます。また、コンフリクトを防ぐための、eslint-config-prettierのインストール方法についても書きます。

注意

　インストールはyarnを使っています。npmを使った場合の挙動は記述しておりません。
　npmなどを使うインストール方法はドキュメントに書いてありますので、そちらを参照してください。

目次

1. ESLintのインストール
2. Prettierのインストール
3. eslint-config-prettierのインストール
4. npm scriptsの設定
5. 総括
6. 参考

1. ESLintのインストール

　公式サイトのクイックスタートを行います。

$ yarn create @eslint/config

インストールできたら、解析したいファイルを選んで実行します

$ yarn run eslint ファイル名

実行できているようですが、上部にWarningが出ました。

Warning: React version not specified in eslint-plugin-react settings. 
See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

eslint-plugin-reactのバージョンが設定されていないようです。書いてある通り、https://github.com/jsx-eslint/eslint-plugin-react#configuration をみます。

　先ほどのURLのホームページを読み進めると、Configuration (new: eslint.config.js)という項目が見つかります。eslintのバージョン9あたりから、eslintの設定はeslint.config.jsに書かれているようです。eslintのバージョンは次のコマンドで確認できます。

$ yarn eslint -v

ただし、eslint-plugin-reactのバージョン設定方法は同じです。

The schema of the settings.react object would be identical to that of what's already described above in the legacy config section.（ドキュメントより引用）

eslint.config.mjsに以下のように追加します。

# eslint.config.mjs

export default [
  ...
  {settings: {
    react: {
      version: 'detect', # detectは使っているReactのバージョンを自動で参照してくれる。
    }
  }},
  ...
];

これで先ほどのエラーは解消しました。settings:の先頭に'{'をつけることに注意します。（少し手間取った）

2. Prettierのインストール

　公式サイトに従ってインストールします。

$ yarn add --dev --exact prettier

これを打ち込むと筆者の環境では権限がないと言われました。先頭にsudoをつけて、再度実行します

$ sudo yarn add --dev --exact prettier

正しく実行できたら。次のコマンドを打ち込んで、ファイルを作成します。

 $ node --eval "fs.writeFileSync('.prettierrc','{}\n')"
 $ node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

実行してみます。（ファイルが綺麗な書き方になるので、独自の書き方をしている人は注意）

$ yarn prettier . --write

綺麗な書き方になりました。

3.eslint-config-prettierのインストール

　eslintとprettierは正しく動きました。しかし先ほどのprettierのドキュメントを見ると次のように書いてあります。

ESLint (and other linters)

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other.

　ESLintとPrettierを両方使うときは、eslint-config-prettier を使う必要があるようです。インストール手順をみてeslint-config-prettierを次のコマンドでインストールします。
　しかし、手順通りに進めるとエラーが出ました。おそらくeslintがv9であることが原因です。下記のサイトを参考に、eslintの設定ファイルの形式が変わったv8.23.0にバージョンダウンします。

$ yarn remove eslint
$ yarn add -D eslint@8.23.0

package.jsonを見るとeslntのバージョンが8.23.0になっていることを確認できます。
　そうしたら、eslint-config-prettierのインストールに取り掛かります。インストール手順をみて進めます。

$ npm install eslint eslint-plugin-react --save-dev

eslint.config.mjsに追加します。他の設定を上書きできるように、下に書くことに気をつけてください。（上から読み込まれる）

# eslint.config.mjs

import eslintConfigPrettier from "eslint-config-prettier"; # 追加

export default [
  ...
  {extends: ["plugin:react/recommended"]}, # 追加
  eslintConfigPrettier, # 追加
  {settings: {
    ...
  },
  rules: {               # 追加
    "indent": "error",   # 追加
  }                      # 追加
},
  ...
];

これで完了です。

そしたら確認のため、eslintを実行します。

$ yarn run eslint ファイル名

筆者の環境ではエラーが出ました。react-appが〜 という内容でした。下記のサイトを参考にコマンドを打ち込みます。

$ yarn add eslint-config-react-app -D

エラーが解消されました。
　prettierを実行したときはエラーは出ませんでした。

　筆者の環境ではeslintもprettierも動き、アプリケーションも立ち上がりました。以上でインストール作業を終わります。

4.npm scriptsの設定

　ここからはインストール方法と関係ありません。実行する際のコマンドの入力の仕方についてです。
　eslintとPrettierを実行するためのコードは長いです。これを短くする方法があります。それが、npm scriptsです。
　package.jsonの"scripts"に追加します。

# package.json

"scripts": {
    ...
    "lint": "eslint .",
    "fix": "yarn prettier . --write"
  },

'eslint'は'lint'、'prettier'は"fix"という名前で呼び出せるようにしました。実行の際は以下のようにして呼び出します。

$ npm run lint
$ npm run fix

このようにして、コマンドを短くすることができます。

5. 総括

　ESLintとPrettierを使った環境構築を行いました。バージョンによって設定方法が変わるため、ドキュメントが必要不可欠です。
　今回はインストールだけなので、設定はしていません。
　環境構築は難しいですが、ドキュメントの読み方、エラーの対処法は経験値となるので、次回の環境構築は少しスムーズにできるはずです。

6. 参考