ionic-attr-type-check

Ionicコンポーネントの非string属性への文字列値を禁止し、適切なproperty bindingを提案する。boolean・number・object型属性に対応する。
⭐️ このルールは plugin:@rdlabo/rules/recommended プリセットに含まれます。
✒️ コマンドラインの --fix オプションで、このルールが報告する問題の一部を自動修正できます。
このルールは、Ionicコンポーネントのテンプレートで非string属性（boolean、number、object、complex）に文字列値が割り当てられている箇所を検出し、適切なproperty bindingを提案することで、TypeScriptのビルドエラーを防ぎます。
 ルール詳細このルールは、Ionicコンポーネントのテンプレートで非string属性（boolean、number、object、complex）に文字列値が割り当てられている箇所を検出します。
❌ 誤り: 非string属性に文字列値を使う
<ion-item button="true"></ion-item>
<ion-list inset="true"></ion-list>
<ion-progress-bar value="50"></ion-progress-bar>
<input disabled="false"></input>
<button readonly="1"></button>
✅ 正しい: property bindingを使う
<ion-item [button]="true"></ion-item>
<ion-list [inset]="true"></ion-list>
<ion-progress-bar [value]="50"></ion-progress-bar>
<input [disabled]="false"></input>
<button [readonly]="true"></button>
 オプションオプションなし。
 サポートする属性型このルールはIonicコンポーネントの型定義から非string属性を自動で特定し、次のような属性を検出します。
 Ionicコンポーネント属性の例ion-item: button, disabled, detail
ion-list: inset, lines
ion-button: disabled, expand, fill, strong
ion-checkbox: checked, disabled, indeterminate
ion-toggle: checked, disabled
ion-radio: checked, disabled
ion-input: disabled, readonly, required
ion-textarea: disabled, readonly, required
ion-select: disabled, multiple, required
ion-datetime: disabled, readonly
ion-range: disabled, pin, snaps
ion-segment: disabled
ion-slides: pager, scrollbar
ion-tab: selected
ion-menu: disabled, swipeGesture
ion-modal: animated, backdropDismiss, showBackdrop
ion-popover: animated, backdropDismiss, showBackdrop
ion-alert: animated, backdropDismiss
ion-loading: animated, backdropDismiss
ion-toast: animated
ion-action-sheet: animated, backdropDismiss
 エラーメッセージこのルールは次のメッセージを表示します。
boolean attribute 'button' should not have a string value 'true'. Use property binding [button]="true" instead.
number attribute 'value' should not have a string value '50'. Use property binding [value]="50" instead.
 実装Rule source
Test source