deny-element

このプラグインは特定のHTMLタグの使用を禁止します。

• ⭐️ このルールは plugin:@rdlabo/rules/recommended プリセットに含まれます。

このルールは、Angular templateで特定のelementが使われることを防ぎます。一般的には、templateで宣言する代わりにlauncher methodや専用serviceを通じて表示すべき <ion-modal>、<ion-popover>、<ion-toast>、<ion-alert>、<ion-loading>、<ion-picker>、<ion-action-sheet> などのinline overlay componentを禁止するために使います。

ルール詳細

このルールは .html template fileで実行され、tag nameが設定済みの elements listに含まれるelementを報告します。template ASTを走査し、@if、@for、@else と、ネストした then / else branchなどのAngular control flow構文にも対応します。

• testに影響しないよう .spec.html fileは無視します。
• 明示的なオプションがなければ、デフォルトのIonic overlay element listを使います。option objectを指定する場合、そのschemaでは elements arrayが必須です。

オプション

{
  "rules": {
    "@rdlabo/rules/deny-element": [
      "error",
      {
        "elements": ["ion-modal", "ion-popover", "ion-toast", "ion-alert", "ion-loading", "ion-picker", "ion-action-sheet"]
      }
    ]
  }
}

elements

• 型: string[]
• デフォルト: ion-modal, ion-popover, ion-toast, ion-alert, ion-loading, ion-picker, ion-action-sheet

禁止するelement tag nameの配列です。このルールはこれらの名前をAngular template ASTの Element node typeと比較するため、element自体とcontrol flow branch内の存在の両方を検査します。

例

誤り

<ion-modal></ion-modal>

<div>
  <ion-toast></ion-toast>
  <ion-alert></ion-alert>
</div>

@if (showModal) {
<ion-modal>Modal content</ion-modal>
}

正しい

<ion-button (click)="presentModal()">Open</ion-button>

@for (item of items; track item.id) {
<ion-card>
  <ion-card-header>{{ item.name }}</ion-card-header>
</ion-card>
}

有効にする場面

overlayにlauncher patternを使うプロジェクトで、このルールを有効にします。@rdlabo/rules/prefer-modal-launcherおよび@rdlabo/rules/prefer-disable-handlerと組み合わせることで、modalとoverlayのlogicをtemplateから分離できます。

関連項目

• @rdlabo/rules/prefer-modal-launcher
• @rdlabo/rules/prefer-disable-handler

実装

• Rule source
• Test source