@angular-eslint/template-parser

What is @angular-eslint/template-parser?

@angular-eslint/template-parser is a parser for Angular templates that integrates with ESLint. It allows developers to lint Angular templates using ESLint rules, ensuring code quality and consistency in Angular projects.

What are @angular-eslint/template-parser's main functionalities?

Parsing Angular Templates

This feature allows you to parse Angular templates into an Abstract Syntax Tree (AST), which can then be analyzed or transformed. The code sample demonstrates how to parse a simple Angular template.

const parser = require('@angular-eslint/template-parser');
const ast = parser.parse('<div>{{ title }}</div>');
console.log(ast);

Integration with ESLint

This feature allows you to integrate the template parser with ESLint, enabling you to apply ESLint rules to Angular templates. The code sample shows a basic ESLint configuration using the @angular-eslint/template-parser.

module.exports = {
  parser: '@angular-eslint/template-parser',
  plugins: ['@angular-eslint'],
  extends: ['plugin:@angular-eslint/recommended'],
  rules: {
    // custom rules
  }
};

Other packages similar to @angular-eslint/template-parser

eslint-plugin-angular

eslint-plugin-angular is a plugin for ESLint that provides linting rules specific to AngularJS (Angular 1.x). While it offers similar functionality in terms of linting Angular code, it is designed for the older version of Angular and does not support Angular templates in the same way as @angular-eslint/template-parser.

codelyzer

Codelyzer is a set of TSLint rules for static code analysis of Angular TypeScript projects. It provides similar functionality in terms of linting Angular code, but it is based on TSLint, which has been deprecated in favor of ESLint. @angular-eslint/template-parser is part of the modern ESLint ecosystem.

README

@angular-eslint/template-parser

Please see https://github.com/angular-eslint/angular-eslint for full usage instructions and guidance.

The @angular-eslint/template-parser package is a custom parser for ESLint which allows you to write lint rules and run linting using ESLint on Angular templates.

Changelog

18.3.0 (2024-08-13)

🚀 Features

• eslint-plugin: new rule runtime-localize (#1898)

🩹 Fixes

• update dependency eslint to v9.9.0 (#1976)
• update dependency @angular/compiler to v18.1.4 (#1973)
• update dependency ignore to v5.3.2 (#1979)
• update typescript-eslint packages to v8.1.0 (#1982)
• eslint-plugin-template: [interactive-supports-focus] allowList with form as default option to support event bubbling (#1922)
• eslint-plugin-template: [prefer-self-closing-tags] fix ng-content with rich default content (#1971)
• prefer-self-closing-tags: handle both forward and backward slash (#1967)

❤️ Thank You

• Daniel Kimmich @json-derulo
• James Henry @JamesHenry
• m-akinc @m-akinc
• Sandi Barr @sandikbarr
• Simon