@angular-eslint/builder

What is @angular-eslint/builder?

The @angular-eslint/builder package is an npm package that integrates ESLint into Angular CLI projects. It allows developers to lint their Angular TypeScript code using ESLint, which is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. With @angular-eslint/builder, developers can run lint checks as part of their build process or as a separate step in their development workflow.

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

Linting Angular TypeScript code

This feature allows developers to lint their Angular project's TypeScript code. The command 'ng lint' is used to execute the linting process, which checks the code for any issues or style violations based on the ESLint configurations.

ng lint

Customizable ESLint configurations

Developers can customize ESLint rules for their Angular projects. This code sample shows a snippet of an ESLint configuration file where specific rules for directive and component selectors are defined.

{
  "extends": "@angular-eslint/recommended",
  "rules": {
    "@angular-eslint/directive-selector": ["error", { "type": "attribute", "prefix": "app", "style": "camelCase" }],
    "@angular-eslint/component-selector": ["error", { "type": "element", "prefix": "app", "style": "kebab-case" }]
  }
}

Integration with Angular CLI

The package integrates with Angular CLI, allowing developers to add linting capabilities to their Angular CLI projects. This code sample shows how to configure the Angular workspace file (angular.json) to use @angular-eslint/builder for the linting process.

{
  "architect": {
    "lint": {
      "builder": "@angular-eslint/builder:lint",
      "options": {
        "lintFilePatterns": [
          "src/**/*.ts",
          "src/**/*.html"
        ]
      }
    }
  }
}

Other packages similar to @angular-eslint/builder

eslint

ESLint is the core linting tool that @angular-eslint/builder relies on. It provides a framework for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the ability to configure rules and plugins.

tslint

TSLint was a popular linter for TypeScript before being deprecated in favor of ESLint. It provided similar functionality to ESLint but was specifically designed for TypeScript. @angular-eslint/builder offers a migration path for projects moving from TSLint to ESLint.

eslint-plugin-angular

eslint-plugin-angular is an ESLint plugin that contains linting rules specifically for AngularJS (1.x) projects. It is different from @angular-eslint/builder, which is designed for Angular (2+) projects.

eslint-plugin-react

eslint-plugin-react is an ESLint plugin that provides React-specific linting rules. It is similar to @angular-eslint/builder in that it extends ESLint's capabilities to a specific framework, but it targets React instead of Angular.

README

@angular-eslint/builder

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

The @angular-eslint/builder package is a custom Angular CLI builder that allows you to run ESLint on your Angular CLI projects.

It wraps the ESLint programmatic node API (https://eslint.org/docs/latest/integrate/nodejs-api) to provide a seamless experience via ng lint that is closely equivalent to using the eslint CLI directly.