ESLintとPrettierの設定

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




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

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

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

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



<br>
👇 過去記事

https://qiita.com/b-yuko/items/bf59604b53eda6c3a6f1

https://qiita.com/b-yuko/items/299e2c92f3f810186f5b




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

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

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

```diff:.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'
+     }
+   }
  }
```
<br>
<br>



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

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

👉 **eslint-plugin-jsx-a11y**

https://www.npmjs.com/package/eslint-plugin-jsx-a11y

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

```diff:.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'
    ],
```

```diff:.eslint.cjs
  plugins: [
        'react',
        'react-refresh',
+       'jsx-a11y'
    ],
```
<br>
<br>



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


```diff:.eslint.cjs
  env: { 
      browser: true,
-     es2020: true
+     es2024: true
    },
```
<br>
<br>


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



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

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

https://eslint.org/docs/latest/use/command-line-interface


```diff: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 対象のディレクトリを指定
<br>

#### `--ext ts,tsx`
Linting 対象の拡張子を指定
<br>

#### `--report-unused-disable-directives`
未使用の eslint-disable や eslint-enable があると教えてくれる
<br>

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

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

#### `--fix`
ESLint にできるだけ多くの問題を修正してもらうおまじない
<br>
<br>



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

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



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

### ■ Prettier のインストール

https://prettier.io/docs/en/install

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

```shell
npm i -D prettier eslint-config-prettier
```

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

https://github.com/prettier/eslint-config-prettier#installation


```diff:.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'
    ],
```
<br>

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

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

https://prettier.io/docs/en/configuration

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

https://prettier.io/docs/en/options


#### `experimentalTernaries` Default: false
三項演算子を使ったときのフォーマット方法

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

#### `singleQuote` Default: false
ダブルクォーテーションの代わりにシングルクォーテーションを使う

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

#### `jsxSingleQuote` Default: false
JSX でダブルクォーテーションの代わりにシングルクォーテーションを使う

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

#### `trailingComma` Default: "all"
オブジェクトの最後のカンマを付けるとか付けないとか・・・

💬 いらないと思う・・・。
<br>
<br>

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

```:.prettierrc
{
  "experimentalTernaries": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "none"
}
```

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

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

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


# lint の実行コマンドに Prettier も実行できるように追加する
気持ち的に先にコードをフォーマットしてから Linting してもらいたいな〜


```diff: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`
フォーマット対象のディレクトリを指定
<br>

#### `--write`
整形した内容でコードを上書き保存してねというおまじない
<br>
<br>



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

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



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


# 次回のお知らせ
次回は、ユニットテストができるように vitest を入れていきます。
<br>
<br>
<br>


[目次に戻る](#目次)