html-eslint v0.58.0

Getting Started

@html-eslint/eslint-plugin-angular-template is an ESLint plugin that validates HTML elements and attributes directly in Angular template files (.html). It extends the core @html-eslint functionality to work seamlessly with Angular templates parsed by @angular-eslint/template-parser.

Contents

  1. Installation
  2. Configuration

Installation

  1. npm
Terminal 
npm install --save-dev eslint @html-eslint/eslint-plugin-angular-template @angular-eslint/template-parser
  1. yarn
Terminal 
yarn add -D eslint @html-eslint/eslint-plugin-angular-template @angular-eslint/template-parser

Configuration

Update your ESLint configuration file:

Manual Configuration 

// eslint.config.js (flat config)
import angularTemplate from "@html-eslint/eslint-plugin-angular-template";
import templateParser from "@angular-eslint/template-parser";

export default [
  {
    files: ["**/*.html"],
    languageOptions: {
      parser: templateParser,
    },
    plugins: {
      "@html-eslint/angular-template": angularTemplate,
    },
    rules: {
      "@html-eslint/angular-template/use-baseline": "warn",
      "@html-eslint/angular-template/no-duplicate-class": "error",
    },
  },
];

Using Preset Configurations

The plugin provides two preset configurations:

  1. recommended - Enables all available rules with recommended severity
  2. all - Enables all available rules with error severity
// eslint.config.js
import angularTemplate from "@html-eslint/eslint-plugin-angular-template";
import templateParser from "@angular-eslint/template-parser";

export default [
  {
    files: ["**/*.html"],
    plugins: {
      "@html-eslint/angular-template": angularTemplate,
    },
    languageOptions: {
      parser: templateParser,
    },
    rules: angularTemplate.configs.recommended.rules,
  },
];

Using the All Configuration 

// eslint.config.js
import angularTemplate from "@html-eslint/eslint-plugin-angular-template";
import templateParser from "@angular-eslint/template-parser";

export default [
  {
    files: ["**/*.html"],
    plugins: {
      "@html-eslint/angular-template": angularTemplate,
    },
    languageOptions: {
      parser: templateParser,
    },
    rules: angularTemplate.configs.all.rules,
  },
];