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

やったこと

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

前提

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

自動で未使用のimportを削除とimportの順番を整理できるようにした。

これはひどい

いままで見て見ぬふりをしていましたが...
私のプロジェクトでng lintした結果がこちらです。

"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;を適当な箇所に入れて実行しました。
ちゃんと動いてる！いままで動いてないと勘違いしててごめんね。

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

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

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

サポート外みたい

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

まあダメもとでやってみるか、動かなかったらその時考えよう。
ということで落として実行した結果

"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でもいいならバージョンさげたほうがよくない？
ということで、調べたら↓が出てきた。

npm ls packagenameでそのパッケージの依存関係を調べてくれるみたい。
結果がこちら

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

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

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を一回でできるようにしただけ。

    "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をするようにしただけ。

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 を実行。

実は作業中に警告がでてた。

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://github.com/magurouhiru/mysite/pull/15
https://magurouhiru.github.io/mysite/