😎

IonicModuleから誤ってインポートしないためのESLint Ruleを作りました

2023/12/23に公開

Angular

Ionic AnuglarのStandaloneにより、2つのインポート元が生まれました。例えば、 ModalController では以下のようになります。

import { IonToolbar } from '@ionic/angular';
import { IonToolbar } from '@ionic/angular/standalone';

前者はIonicModuleをimportしてる場合のみ利用が可能なコンポーネントで、後者はStandalone Componentとしてコンポーネントをインポートしています。まぁ、手動でやる分はStandalone対応してることがわかってるので間違うことはありませんが、IDEのサジェストでは間違えてしまいそうですよね。

また、 IonToolbar などは間違ってインポートしてもIDEがエラーをだしてくれるのでいいのですが、 ModalController 等のOverlayController系はエラーをださず死ぬので、動作確認しないとエラーを見つけるのが難しいです。そこで、 @ionic/angular からインポートしてるとエラーをだすことができるESLintを作成しました。Ionic AngularのStandalone移行後に設定ください。

使い方

npm install @rdlabo/eslint-plugin-rules --save-dev

  {
    ...
+   "plugins": ["@rdlabo/rules"],
    "overrides": [
      {
        "files": [
          "*.ts"
        ],
      ...
        "rules": {
+         "@rdlabo/rules/deny-import-from-ionic-module": "error",
        }
      },
    ]
  }

エラーがでた場合

> ng lint


Linting "app"...

/home/runner/work/winecode/winecode/app/src/app/list/modals/thread-over-view/thread-over-view.page.ts
Lint errors found in the listed files.
Error:   1:1  error  You must import from @ionic/angular/standalone instead of @ionic/angular  @rdlabo/rules/deny-import-from-ionic-module


✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

まとめ

auto fixにも対応しているので、万が一がないようにご利用いただければと思います。それではまた。

使い方

エラーがでた場合

まとめ

Discussion