@smarterdrafter/eslint-plugin-angular

Smarter Drafter shared ESLint rules for Angular templates.

Installation

npm install --save-dev @smarterdrafter/eslint-plugin-angular

In your .eslintrc.json, add the plugin and enable the rules inside the HTML override:

{
  "overrides": [
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "plugins": ["@smarterdrafter/angular"],
      "rules": {
        "@smarterdrafter/angular/no-static-string-property-binding": "error"
      }
    }
  ]
}

Rules

no-static-string-property-binding

Disallows property bindings whose value is a bare string literal. Under Angular's strictTemplates, both forms get the same type check against the input's declared type, so the bracket form adds visual noise without any safety benefit.

<!-- ✗ flagged + auto-fixable -->
<app-alert [type]="'warning'" />
<app-button [iconPosition]="'end'" />
<img [src]="'/assets/logo.png'" />

<!-- ✓ preferred -->
<app-alert type="warning" />
<app-button iconPosition="end" />
<img src="/assets/logo.png" />

<!-- ✓ not flagged — these legitimately need the brackets -->
<app-button [type]="buttonType" />
<app-button [count]="5" />
<app-button [disabled]="true" />
<app-alert [type]="isError ? 'danger' : 'success'" />
<button [attr.aria-label]="'Close'" />

Auto-fix rewrites [name]="'value'" → name="value". The fix is skipped if the literal value contains a character that would need HTML-escaping (", <, >, &) — the violation is still reported, you just fix it by hand.

License

MIT