ESLint configuration - Angular

The Angular extension for our ESLint configuration base. This configuration was migrated from another repository and was previously published as a special configuration under @pxlwidgets/eslint-config.

Table of contents

[[TOC]]

Peer dependencies

• @pxlwidgets/eslint-config
• @angular-eslint/builder
• @angular-eslint/eslint-plugin
• @angular-eslint/eslint-plugin-template
• @angular-eslint/template-parser

About

This repository maintains distinct branches for each major Angular version. By default, the two latest versions are actively supported. The branch names follow the angular-{MAJOR_VERSION} pattern, and each have their own package version tags within that major version of Angular. Therefore, they also all have their own CHANGELOG history.

Version tags are for each branch in sync with its corresponding Angular version. For instance, branch angular-12 will have version release tags that all follow the pattern v12.<minor>.<patch>. Therefore, breaking changes may occur in minor version updates of this package. You may consult the CHANGELOG file in the respective branch to check for any breaking changes.

Installation

Please refer to one of the following branches for exact installation instructions based on your Angular version. If you use an Angular version that is older than any version listed, please try to update your project so that it can use any of these configuration versions. If you can not update then file an issue, and refer to your project there.

View installation instructions for:

• Angular 12
• Angular 13
• Angular 14

Usage

Angular uses the ng lint command. In order to make that command use ESLint instead of TSLint, follow this guide , or update the projects > app > architect > lint path in your angular.json file as follows:

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

Note that the angular-eslint package will only work for Angular 8+. There is also a separate configuration for E2E in the angular.json if you are using Angular's default E2E testing you may need to make sure that the linting config for it is set up similarly to the main build.

Development

• For each new Angular version create a new branch angular-{MAJOR_VERSION}, e.g. angular-12, and sync the dependency versions in that branch. All @angular-eslint/* dependencies also sync their major versions with the compatible Angular version.

• Maintain a tag sequence for each major Angular version independently, and only create tags for Angular version x in the corresponding branch angular-x.

• Don't merge version branches into base.

• When an update to the generic documentation is required, perform this update in base, and merge base into all angular-x branches.

• When an update to the generic ESLint configuration is required, perform this update in base, and merge base into as many angular-x branches as possible. When you do, make sure that the configuration update is compatible with the ESLint version required by the target branch. You can check the required version by checking out the target branch and then running npm install && npm ls eslint.

• Since tags for specific configuration versions are created on angular-x branches, never rebase any of these branches.