ESLintの設定をしてみた

# 前回までのおさらい

https://qiita.com/Qiitakumin/items/4fdc24861c8795d9abcd

# ESLint
https://eslint.org/docs/latest/use/getting-started

## .eslintrcを作成する
```shell
npm init @eslint/config
```

実行すると、対話形式でファイルを作成できる

https://qiita.com/uhooi/items/f22b53b6e39228fc4826

```shell-session
? How would you like to use ESLint?
> To check syntax, find problems, and enforce code style   

? What type of modules does your project use? 
> JavaScript modules (import/export) 

? Which framework does your project use?
> React

? Does your project use TypeScript? › No / Yes
› Yes

? Where does your code run?
> Browser

? How would you like to define a style for your project?
> Use a popular style guide

? Which style guide do you want to follow?
> Standard: https://github.com/standard/eslint-config-standard-with-typescript

? What format do you want your config file to be in?
> JavaScript

? Would you like to install them now? › No / Yes
> Yes

? Which package manager do you want to use?
> npm
```

#### 設定項目の解説

https://qiita.com/ibara1454/items/be73615df332564e7855

https://zenn.dev/kazukix/articles/eslint-config-react-native

:::note warn
現状でlintを実行すると、すごい数のエラーになる！！
:::
抜粋）こんなエラーが・・・
```shell
error  Missing return type on function          @typescript-eslint/explicit-function-return-type
error  'React' must be in scope when using JSX  react/react-in-jsx-scope
error  Do not use a triple slash reference for vite/client, use `import` style instead  @typescript-eslint/triple-slash-reference
error  Forbidden non-null assertion 
error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/vite.config.ts` using `parserOptions.project`:
```

## エラーを解決していく・・・

### おすすめルールとして参照

https://zenn.dev/noshiro_piko/articles/take-full-advantage-of-typescript-eslint

```diff_javascript:.eslintrc.cjs
module.exports = {
  "env": {
    "browser": true,
-   "es2021": true
+   "es2024": true //とりあえず最新に
    },
    "extends": [
+       "eslint:recommended",   // ESLint の推奨チェック項目だけを手軽に追加
+       "plugin:@typescript-eslint/recommended",   // ESLint Plugin typescrip-eslintの推奨する一連のルール
        "plugin:react/recommended",
        "standard-with-typescript"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
+       "@typescript-eslint",   // ESLint を TypeScript で動作させるプラグインを追加
        "react"
    ],
    "rules": {
    },
+   // 各ルールが実行させる時の補助共有設定
+   "settings": {
+       "react": {
+           "version": "detect"   // eslint-plugin-react の設定項目でリンティングする React のバージョンを 自動判定にするもの
+       }
+   }
}
```

### Reactに関するルールを３つ追加
https://zenn.dev/yhay81/articles/def73cf8a02864

#### plugin:react/jsx-runtime
`'React' must be in scope when using JSX` は、JSX を使用する際に React オブジェクトがスコープ内に存在していない場合に発生するエラーメッセージです。

.eslintrc.cjs に下記を追記する
```diff_javascript:.eslintrc.cjs
"extends": [
+   "plugin:react/jsx-runtime",
],
```
補足）React のバージョン 17 よりも上のバージョンを使用している場合は 
`import React from 'react'` が不要になるため、
`recommended` で有効化したものを、`jsx-runtime` で無効化している

:::note info
error  'React' must be in scope when using JSX  react/react-in-jsx-scope
が消えた！！
:::


#### eslint-plugin-jsx-a11y
- Web アクセシビリティに配慮した記述を JSX で行うためのプラグイン
```shell
npm i -D eslint-plugin-jsx-a11y
```
https://qiita.com/sotabkw/items/9e78bf1103117b091ee5#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%99%82%E3%81%AB%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84a11y%E5%AF%BE%E5%BF%9C

#### eslint-plugin-react-hooks
- React Hooks を使ったとき、適切な記述になるよう用意されたプラグイン
```shell
npm i -D eslint-plugin-react-hooks
```
https://legacy.reactjs.org/docs/hooks-rules.html#eslint-plugin

```diff_javascript:.eslintrc.cjs
"extends": [
    "plugin:react/jsx-runtime",
+   "plugin:jsx-a11y/recommended",
+   "plugin:react-hooks/recommended"
],
"plugins": [
+   "jsx-a11y",
+   "react-hooks"
],
```

:::note warn
上記２つは、今のエラーは解決できないがこれから役に立つプラグイン
:::


#### package.json の lint を書き換える

- `--report-unused-disable-directives`
    - 未使用の eslint-disable および eslint-enable ディレクティブのエラーを出してくれる
- `--fix`
    - 警告を自動修正してくれる
- `--max-warnings 0`
    -  ワーニングの最大数を0に設定します。つまり、ワーニングが1つでもあれば、エラーとして処理されます。

```diff_json:package.json 
"scripts": {
-   "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+   "lint": "eslint ./src --ext ts,tsx --report-unused-disable-directives --fix",
  },
```

### lintを実行する
```shell
npm run lint
```

結果

:::note info
error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/vite.config.ts` using `parserOptions.project` 解決！！
:::


```shell
error  Missing return type on function          @typescript-eslint/explicit-function-return-type
error  Do not use a triple slash reference for vite/client, use `import` style instead  @typescript-eslint/triple-slash-reference
error  Forbidden non-null assertion 
```

#### エラーの内容を見て、再度解消を試みる
- error  Missing return type on function
    - 関数の返り値を明示的にした
- Forbidden non-null assertion
    - null値の可能性がある値に"!"がNGだったが、デフォルトで作成したコードのため、コメント対応した
- Do not use a triple slash reference for vite/client, use `import` style instead
    - "///"の記載のファイルがあったが、開発コードとあまり関係ないため、lint対象外にした
   => .eslintrc.cjs に下記を追記する
```diff_javascript:.eslintrc.cjs
module.exports = {
    ...
      "ignorePatterns": [
+        "/src/vite-env.d.ts"
    ]
}
```

## ESLintの理解を進めてみた

### 大枠を理解

https://www.youtube.com/watch?v=TTutJJUGMbY&t=519s

### プロパティを理解

https://zenn.dev/harusame0616/articles/42a52bc0f9843c

https://qiita.com/ibara1454/items/be73615df332564e7855

https://qiita.com/Leech/items/330e78cc3a83f21aaae8

https://zenn.dev/renoa/articles/what-is-eslint

https://typescriptbook.jp/tutorials/eslint#eslint%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B

### plugin/extends

https://zenn.dev/januswel/articles/402774d76424e71ac906

https://zenn.dev/siakas/scraps/6bbc0d2e19fc3d

### ファイル形式・拡張子

https://qiita.com/YumaInaura/items/01b8e6546a6bf75bd53c

### ESLint 既存の細かいルール一覧

https://qiita.com/howdy39/items/6e2c75861bc5a14b2acf#%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%AE%E6%8E%A2%E3%81%97%E6%96%B9

https://zenn.dev/kazukix/articles/create-similar-react-components

https://garafu.blogspot.com/2017/02/eslint-rules-jp.html

https://eslint.org/docs/latest/rules/

### リファクタリング

https://zenn.dev/kimromi/articles/b7cf98005f3193

# 次回予告

https://qiita.com/Qiitakumin/items/c580aae02ff8c9c1d6f1