ESLintとPrettierの設定

目次

はじめに
ESLint 追加の設定
lint の実行コマンドを編集する
Prettier の設定
lint の実行コマンドに Prettier も実行できるように追加する
まとめ
次回のお知らせ

はじめに

この記事は、TODO アプリを環境構築から作っていく様子を、少しずつ投稿してく、第３回目の記事になります。

前回までに、Vite プロジェクトを生成して、README を真面目に読んで ESLint の設定を いい感じに？ 変更してあります。

今回は、もう少しだけ ESLint の設定を追加して、Prettier の設定をしたら、npm コマンドから実行できる設定までやってみます。

ちょっと色々と他のことやってたら前回の記事から期間が空いちゃった💦
学びたいことがいっぱいあって、手を出しすぎて、どれもまともにできない、悪いクセ発病中🤯

👇 過去記事

ESLint 追加の設定

もう少しだけ lint の設定追加したいな〜ということでやっていきます！

■ Reactのバージョンを自動的に選択する設定

なんとなくあるとよさそうの気がするので入れておこうかな。（動機が不純〜）

.eslint.cjs

  module.exports = {
    root: true,
    env: { browser: true, es2020: true },
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended-type-checked',
      'plugin:react-hooks/recommended',
      'plugin:react/recommended',
      'plugin:react/jsx-runtime'
    ],
    ignorePatterns: ['dist', '.eslintrc.cjs'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      project: ['./tsconfig.json', './tsconfig.node.json'],
      tsconfigRootDir: __dirname,
    },
-   plugins: ['react-refresh'],
+   plugins: [
+     'react',
+     'react-refresh',
+   ],
    rules: {
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
+   settings: {
+     react: {
+       version: 'detect'
+     }
+   }
  }

■ アクセシビリティに配慮した記述を JSX で行うためのルール追加

これも、なんとなくあるとよさそうの気がするので入れておこうかな。

👉 eslint-plugin-jsx-a11y

npm install eslint-plugin-jsx-a11y --save-dev

.eslint.cjs

  extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended-type-checked',
      'plugin:react-hooks/recommended',
      'plugin:react/recommended',
      'plugin:react/jsx-runtime',
+     'plugin:jsx-a11y/recommended'
    ],

.eslint.cjs

  plugins: [
        'react',
        'react-refresh',
+       'jsx-a11y'
    ],

■ Linting の対象となる環境を新しいものに変更

es2024があるっぽかったので、せっかくなので新しいものに！
TSのバージョンを考えても es2022 でよさそう・・・。ただなんとなくです。

.eslint.cjs

  env: { 
      browser: true,
-     es2020: true
+     es2024: true
    },

一応気になってた設定は追加したつもり・・・。
他にも、この設定あったほうがいいよとか、あったらぜひコメントお願いします<(_ _*)>

lint の実行コマンドを編集する

ターミナルから npm run lint を実行したときに、これやってね〜 のところです。
package.json の scripts を編集します。

ちゃんと公式ドキュメントがあるのね🤩

package.json

  "scripts": {
      "dev": "vite",
      "build": "tsc && vite build",
-     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+     "lint": "eslint ./src --ext ts,tsx --report-unused-disable-directives --fix",
      "preview": "vite preview"
  },

./src

Linting 対象のディレクトリを指定

--ext ts,tsx

Linting 対象の拡張子を指定

--report-unused-disable-directives

未使用の eslint-disable や eslint-enable があると教えてくれる

--max-warnings 0

ESLint の警告の数が指定した値(0)より大きいと、エラーステータスで強制終了する

💬 どれだけ警告が出るか知らないけど、ローカルで開発してる分には 警告あるよ〜 って教えてくれるだけでいいので削除〜！

--fix

ESLint にできるだけ多くの問題を修正してもらうおまじない

npm コマンドで試しに実行してみる・・・。
npm run lint
あれ・・・。警告ひとつくらい出るかと思ったけど何もでなかった。まいっか。

ここで一旦コミットします。
git commit -m "ESLint の設定を追加した"
GitHubリポジトリ 👉 https://github.com/b-yuko/todo-app-tdd

Prettier の設定

さて〜。次は Prettier の設定です。
ESLint を入れているので、Prettier と相互に連携できるような設定をしないと・・・ですね。

■ Prettier のインストール

こちらも公式ドキュメントを眺めて・・・。
prettier と eslint-config-prettier を入れるのかな。
多分こんな感じでインストールすればよさそう。

npm i -D prettier eslint-config-prettier

eslint-config-prettier を入れたので、.eslintrc.cjs の extends の一番下に prettier を追加する。
extends の一番下に入れる理由は、他の設定を上書きしちゃうからなんだって〜。
👇 ここに書いてあった。ふ〜ん。

.eslint.cjs

  extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended-type-checked',
      'plugin:react-hooks/recommended',
      'plugin:react/recommended',
      'plugin:react/jsx-runtime',
      'plugin:jsx-a11y/recommended',
+     'prettier'
    ],

■ Prettier の設定ファイルを追加する

ほとんどデフォルトの設定でよい気はするが・・・。
ちょっとくらいなにか設定してみよう。

frontend の直下に、.prettierrc ってファイルを作成する。
中身は JSON 形式で書こうかな。
👇 設定ファイルの話はここに書いてある。

👇 設定ファイルの設定項目の話はここに。

experimentalTernaries Default: false

三項演算子を使ったときのフォーマット方法

💬 三項演算子の ? や : をいい感じにフォーマットしてくれそうな雰囲気があったので true にしてみます。

singleQuote Default: false

ダブルクォーテーションの代わりにシングルクォーテーションを使う

💬 シングルクォーテーションの方がスッキリ見えそうなので true にします〜。
この設定は JSX に反映されないので要注意。

jsxSingleQuote Default: false

JSX でダブルクォーテーションの代わりにシングルクォーテーションを使う

💬 ここも、シングルクォーテーションの方がスッキリ見えそうなので true にします〜。

trailingComma Default: "all"

オブジェクトの最後のカンマを付けるとか付けないとか・・・

💬 いらないと思う・・・。

ということで私はこんな感じの設定にしました〜

.prettierrc

{
  "experimentalTernaries": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "none"
}

その他はデフォルト値で！

ちなみに、私はセミコロンつける派です。
セミコロンを省略してるコードで、極稀にセミコロンから始まるコードに出会うことがあって。
わざわざセミコロンから始める理由ってなんだろう？って思ったんだけど、前の文との区切りが認識できず意図した挙動にならないときにあえてつけてるみたい。
だったら最初から文末にセミコロン付けといたらそんなややこしいことにならないでしょ・・・。という考えで、セミコロンつける派です。

あとは１行の区切りを 120 にしようと思ってたけど、１行が長いと横にスクロールするのめんどいし、prittier が 80 をめっちゃ推してるからそのままにしました。

lint の実行コマンドに Prettier も実行できるように追加する

気持ち的に先にコードをフォーマットしてから Linting してもらいたいな〜

package.json

  "scripts": {
      "dev": "vite",
      "build": "tsc && vite build",
-     "lint": "eslint ./src --ext ts,tsx --report-unused-disable-directives --fix",
+     "lint": "prettier ./src --write && eslint ./src --ext ts,tsx --report-unused-disable-directives --fix",
      "preview": "vite preview"
  },

./src

フォーマット対象のディレクトリを指定

--write

整形した内容でコードを上書き保存してねというおまじない

npm コマンドで試しに実行してみる・・・。
npm run lint
お〜。セミコロンが一斉についた〜(笑)いい感じ！！

そしたらここでコミットしましょう。
git commit -m "Prettier の設定をした"
GitHubリポジトリ 👉 https://github.com/b-yuko/todo-app-tdd

まとめ

今回は、ESLint の設定を追加して、Prettier の設定を行いました。
正直何が正解か分からないし(正解はないか･･･)、好みもあると思うので、自分はこういう考えでこうしてるよ〜って話聞けたら嬉しいです🥳

次回のお知らせ

次回は、ユニットテストができるように vitest を入れていきます。

目次に戻る