@angular-eslint/utils

What is @angular-eslint/utils?

@angular-eslint/utils is a utility package designed to help developers integrate ESLint with Angular projects. It provides a set of tools and utilities to facilitate linting Angular code, ensuring code quality and consistency.

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

Rule Creation

This feature allows developers to create custom ESLint rules tailored to their Angular projects. The code sample demonstrates how to define a custom rule that disallows a specific pattern.

const { createESLintRule } = require('@angular-eslint/utils');

module.exports = createESLintRule({
  name: 'my-custom-rule',
  meta: {
    type: 'problem',
    docs: {
      description: 'Disallow certain patterns',
      category: 'Best Practices',
      recommended: 'error'
    },
    schema: [],
    messages: {
      forbiddenPattern: 'This pattern is not allowed.'
    }
  },
  defaultOptions: [],
  create(context) {
    return {
      Identifier(node) {
        if (node.name === 'forbiddenPattern') {
          context.report({ node, messageId: 'forbiddenPattern' });
        }
      }
    };
  }
});

AST Utilities

This feature provides utilities for working with Angular's Abstract Syntax Tree (AST). The code sample shows how to use `getTemplateParserServices` to suggest improvements for Angular templates.

const { getTemplateParserServices } = require('@angular-eslint/utils');

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Suggest improvements for Angular templates',
      category: 'Best Practices',
      recommended: 'warn'
    },
    schema: [],
    messages: {
      suggestImprovement: 'Consider improving this template.'
    }
  },
  create(context) {
    const parserServices = getTemplateParserServices(context);
    return {
      'Element$1'(node) {
        const templateNode = parserServices.convertNodeSourceSpanToLoc(node.sourceSpan);
        context.report({ node: templateNode, messageId: 'suggestImprovement' });
      }
    };
  }
};

Other packages similar to @angular-eslint/utils

eslint-plugin-angular

eslint-plugin-angular is a plugin that provides a set of ESLint rules for AngularJS applications. It focuses on AngularJS (1.x) rather than Angular (2+), making it suitable for legacy projects. Compared to @angular-eslint/utils, it does not support modern Angular features.

eslint-plugin-angularjs

eslint-plugin-angularjs is another plugin aimed at linting AngularJS (1.x) code. It offers a variety of rules to enforce best practices and code quality in AngularJS projects. Unlike @angular-eslint/utils, it is not designed for Angular (2+) applications.

eslint-plugin-typescript

eslint-plugin-typescript provides linting rules for TypeScript codebases. While it is not specific to Angular, it can be used in conjunction with other plugins to lint TypeScript code in Angular projects. It does not offer Angular-specific utilities like @angular-eslint/utils.

README

@angular-eslint/utils

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

The @angular-eslint/utils package is a set of utility functions and types which are used across the @angular-eslint packages and are helpful when writing your own custom ESLint rules for Angular workspaces.

Changelog

18.4.3 (2024-11-29)

🩹 Fixes

• yarn pnp issues (#2143)
• update dependency @angular/compiler to v18.2.13 (#2139)
• update typescript-eslint packages to v8.16.0 (#2135)

❤️ Thank You

• James Henry @JamesHenry