Angular プロジェクトのeslintを設定するまで

## やったこと
- 自動で未使用のimportを削除とimportの順番を整理できるようにした。
- こまごま系やっつけた。
  - package.json の設定。
  - GitHub Actions の設定。
  - npm audit fix を実行。

## 前提
eslint はインストールしただけで、何も設定してないです。
ちなみにインストールの方法は
eslint      :`ng lint`したらなんかきかれたのでとりあえずyesしただけ。

## 自動で未使用のimportを削除とimportの順番を整理できるようにした。
### これはひどい
いままで見て見ぬふりをしていましたが...
私のプロジェクトで`ng lint`した結果がこちらです。
```aiignore
"C:\Program Files\nodejs\npm.cmd" run lint

> mysite@0.1.0 lint
> ng lint


Linting "mysite"...

C:\xxx\mysite\src\app\article.service.ts
  4:10  error  'catchError' is defined but never used      @typescript-eslint/no-unused-vars
  4:27  error  'of' is defined but never used              @typescript-eslint/no-unused-vars
  4:31  error  'tap' is defined but never used             @typescript-eslint/no-unused-vars
  5:10  error  'ActivatedRoute' is defined but never used  @typescript-eslint/no-unused-vars

C:\xxx\mysite\src\app\article\article.component.ts
  5:25  error  'forkJoin' is defined but never used  @typescript-eslint/no-unused-vars
  5:51  error  'tap' is defined but never used       @typescript-eslint/no-unused-vars

✖ 6 problems (6 errors, 0 warnings)

Lint errors found in the listed files.


Process finished with exit code 1
```

まだ、コンポとサービス1個ずつしか作ってないのに...

これではよくないと、早めに直したほうがよいということで調べました。
`ng lint --fix`すればいいじゃんと思ってましたが、私の環境では直してくれませんでした。なんで？

### そもそも`ng lint --fix`動いてるの？
調べると↓の記事を見つけました。
https://mabushiisign.com/angular-eslint-prettier

記事に習って`ng lint --fix`の動作確認として`private i: number = 2;`を適当な箇所に入れて実行しました。
ちゃんと動いてる！いままで動いてないと勘違いしててごめんね。

となると設定をいじればいいのかな？
エラー出してくれてるから修正までやってくれるようにするオプションがあるだろう。

調べたら↓を見つけました。

https://qiita.com/yukiji/items/5ba9e065ac6ed57d05a4

なるほどプラグインが必要だけど、入れたら成形までやってくれるのか。いいね！
早速npm のページ見てコマンドコピペしてー...あれ？

### サポート外みたい
```aiignore
PS C:\xxx\mysite> npm install eslint-plugin-import --save-dev
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: mysite@0.1.0
npm error Found: eslint@9.10.0
npm error node_modules/eslint
npm error   dev eslint@"^9.9.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer eslint@"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" from eslint-plugin-import@2.30.0
npm error node_modules/eslint-plugin-import
npm error   dev eslint-plugin-import@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\elect\AppData\Local\npm-cache\_logs\2024-09-09T15_41_22_748Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\elect\AppData\Local\npm-cache\_logs\2024-09-09T15_41_22_748Z-debug-0.log
```

エラーになった。プラグインがサポートしてるeslintはv8までだけど、インストール済みのeslintはv9だからダメってことらしい。
↓調べたら対応中らしい。動く部分もあるとか？
https://github.com/import-js/eslint-plugin-import/issues/2948

まあダメもとでやってみるか、動かなかったらその時考えよう。
ということで落として実行した結果
```aiignore
"C:\Program Files\nodejs\npm.cmd" run lint_fix

> mysite@0.1.0 lint_fix
> ng lint --fix


Linting "mysite"...
An unhandled exception occurred: Config (unnamed): Unexpected key "meta" found.
See "C:\Users\elect\AppData\Local\Temp\ng-QqX9R6\angular-errors.log" for further details.

Process finished with exit code 127
```
ダメでした。サポート外だからそれはそう。
調べたところ今(2024/9/10)はeslintはv9からいろいろ変わったらしい。
マイグレーションの仕方とかも公式にあるみたい。

### サポート外ならバージョン下げればいいじゃない。
でも、そもそもサポート外のをそこまでしてつかう？
それよりeslintの依存関係調べてv8でもいいならバージョンさげたほうがよくない？
ということで、調べたら↓が出てきた。

https://qiita.com/ybiquitous/items/faec5b83af129b98a5a1

`npm ls packagename`でそのパッケージの依存関係を調べてくれるみたい。
結果がこちら
```aiignore
PS C:\xxx\mysite> npm ls eslint                             
mysite@0.1.0 C:\Users\elect\Desktop\app\intellij_idea\mysite
+-- @typescript-eslint/eslint-plugin@8.4.0
| +-- @typescript-eslint/parser@8.1.0
| | `-- eslint@9.10.0 deduped
| +-- @typescript-eslint/utils@8.4.0
| | `-- eslint@9.10.0 deduped
| `-- eslint@9.10.0 deduped
+-- angular-eslint@18.3.0
| +-- @angular-eslint/builder@18.3.0
| | `-- eslint@9.10.0 deduped
| +-- @angular-eslint/eslint-plugin-template@18.3.0
| | +-- @angular-eslint/utils@18.3.0
| | | `-- eslint@9.10.0 deduped
| | `-- eslint@9.10.0 deduped
| +-- @angular-eslint/eslint-plugin@18.3.0
| | `-- eslint@9.10.0 deduped
| +-- @angular-eslint/template-parser@18.3.0
| | `-- eslint@9.10.0 deduped
| `-- eslint@9.10.0 deduped
+-- eslint-config-prettier@9.1.0
| `-- eslint@9.10.0 deduped
+-- eslint@9.10.0
| `-- @eslint-community/eslint-utils@4.4.0
|   `-- eslint@9.10.0 deduped
`-- typescript-eslint@8.1.0
  +-- @typescript-eslint/eslint-plugin@8.1.0
  | `-- eslint@9.10.0 deduped
  `-- @typescript-eslint/utils@8.1.0
    `-- eslint@9.10.0 deduped
```
多い...
これって1個ずつ見ないといけないのかな？
コマンドでこのバージョンならいいよ！とかおしえてくれないかな？
まあいいやと再インストールして`ng lint`したら同じ結果となった。
バージョン下げてもOKっぽい。

あとはプラグインをインストールしてeslintn.config.jsにかいて...
こうなりました。
https://github.com/magurouhiru/mysite/commit/7a24988985c97f5b69c94f46e36cc96dd165176f#diff-a32a0887ed9d1d707bbb3b845b7df7fd40e673c47e7b60a3ebd896b68d3b8839

## プラグインの設定が大変だったけどできた
結構長くなったので、思ったとこだけ。
- プラグインの登録は雰囲気でやりました。
  - 公式記載方法あるけど`ng lint`でできたファイルとなんかちがう気がする...
- eslint-plugin-import はeslint-import-resolver-typescript も必要。
- eslint-plugin-import のimport/order はpathGroupsExcludedImportTypes にも記載しないとパターンマッチしない。

なんか抜け漏れありそうだけどぱっと見それっぽいからOK。
`ng lint --fix`と`prettier --write`実行ごの比較はこちら
before
```aiignore
import { Component, inject } from '@angular/core';
import { ArticleService } from '../article.service';
import { AsyncPipe } from '@angular/common';
import { MarkdownComponent } from 'ngx-markdown';
import { combineLatest, forkJoin, map, switchMap, tap } from 'rxjs';
import { CardModule } from 'primeng/card';
import { ActivatedRoute } from '@angular/router';
```
after
```aiignore
import { AsyncPipe } from '@angular/common';
import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { combineLatest, map, switchMap } from 'rxjs';

import { CardModule } from 'primeng/card';
import { MarkdownComponent } from 'ngx-markdown';

import { ArticleService } from '../article.service';
```

あらきれい。ちゃんと並びも整ってるし、未使用のやつも消えてる。

## こまごま系やっつけた。
### package.json の設定。
といっても`npm-run-all`をインストールしてlintとprettierを一回でできるようにしただけ。
```aiignore
    "lint&prettier": "run-s lint_fix prettier_fix",     ←New!
    "lint": "ng lint",
    "lint_fix": "ng lint --fix",
    "prettier": "prettier -c src/",
    "prettier_fix": "prettier --write src/"
```

### GitHub Actions の設定。
といってもlintとprettierをするようにしただけ。
```aiignore
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
          cache: "npm"
      - run: npm ci
      - run: npm run lint           ←New!
      - run: npm run prettier       ←New!
      - run: npm run build
#      - run: npm test
```
実は失敗時の動作確認してない。次回コミット時にきっと確認する予定。

### npm audit fix を実行。
実は作業中に警告がでてた。
```aiignore
2 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
```
どうやら今あるパッケージで脆弱性があるやつが2個あって危ないよ！ってことらしい。
`npm audit`コマンドしたら`npm audit fix`で直るよとのこと。
やったらあっさり消えてめでたしめでたし。

### 関係ないことだけど
実はもう1個やろうとしてあきらめたやつがあった。
Google Analytics の導入である。
GitHub Pages はログがないっぽい？ので人来てるか、何見てるか知りたかった。
で調べたら↑が出てきたので早速導入しようとしたところ、利用規約にこの文言が...
## 弊社のサービスはビジネスツールです。必ず、取引、ビジネス、制作、業務に関連する用途に限ってご利用ください。
あっビジネスでやってないのでだめですね！

今回の記事は以上です。

前回の記事はこちら

https://qiita.com/magurouhiru/items/5aa7a2dd70d7ea56a081

詳細見たい人はこちら
https://github.com/magurouhiru/mysite/pull/15
https://magurouhiru.github.io/mysite/