Skip to content

feat!: angular-eslint v19 #2109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Nov 29, 2024
Merged

feat!: angular-eslint v19 #2109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0a7b304
chore: tmp commit
JamesHenry Nov 19, 2024
8ac1fca
feat(eslint-plugin)!: remove deprecated prefer-standalone-component r…
JamesHenry Nov 19, 2024
77dcda6
feat(eslint-plugin)!: prefer-standalone recognizes that standalone is…
json-derulo Nov 19, 2024
9924604
feat(eslint-plugin)!: remove deprecated sort-ngmodule-metadata-arrays…
json-derulo Nov 20, 2024
3302978
feat: update angular packages to the stable v19 (#2120)
leosvelperez Nov 21, 2024
05b86a5
feat(eslint-plugin)!: remove deprecated no-host-metadata-property rul…
json-derulo Nov 21, 2024
d0b00d9
chore: bundle the compiler using esbuild (#2126)
JamesHenry Nov 21, 2024
5666ec7
chore: update dist tag in override major version case in canary
JamesHenry Nov 21, 2024
01bf170
feat: allow referencing angular-eslint as the schematics collection
JamesHenry Nov 23, 2024
4fc836e
feat(eslint-plugin): new rule prefer-signals (#1872)
reduckted Nov 23, 2024
5df0fc3
chore: fix docs
JamesHenry Nov 23, 2024
8446d89
feat(eslint-plugin)!: promote prefer-standalone to recommended
JamesHenry Nov 29, 2024
960bc68
chore: fix prefer-standalone messaging and fixer
JamesHenry Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ jobs:
matrix:
# Additionally supported node versions taken from:
# https://angular.dev/reference/versions
node: ['^18.19.1']
node: ['^18.19.1', '^22.0.0']
steps:
- uses: actions/checkout@v4

Expand Down
42 changes: 21 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<p align="center">
<img alt="angular-eslint-logo" src="https://user-images.githubusercontent.com/900523/101620109-0e5e1f00-3a0c-11eb-8c40-b1d9a8bb3c4c.png" width="128" height="128" />
<img alt="angular-eslint-logo" src="https://github.com/user-attachments/assets/c3aff624-4afe-4510-b5eb-c93090e37ebc" width="128" height="128" />
</p>

<h1 align="center">Angular ESLint</h1>
Expand All @@ -8,9 +8,9 @@

<p align="center">
<a href="https://actions-badge.atrox.dev/angular-eslint/angular-eslint/goto?ref=main"><img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fangular-eslint%2Fangular-eslint%2Fbadge%3Fref%3Dmain&style=flat-square" /></a>
<a href="https://www.npmjs.com/package/@angular-eslint/eslint-plugin"><img src="https://img.shields.io/npm/v/@angular-eslint/eslint-plugin/latest.svg?style=flat-square" alt="NPM Version" /></a>
<a href="https://github.com/angular-eslint/angular-eslint/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@angular-eslint/eslint-plugin.svg?style=flat-square" alt="GitHub license" /></a>
<a href="https://www.npmjs.com/package/@angular-eslint/eslint-plugin"><img src="https://img.shields.io/npm/dm/@angular-eslint/eslint-plugin.svg?style=flat-square" alt="NPM Downloads" /></a>
<a href="https://www.npmjs.com/package/angular-eslint"><img src="https://img.shields.io/npm/v/angular-eslint/latest.svg?style=flat-square" alt="NPM Version" /></a>
<a href="https://github.com/angular-eslint/angular-eslint/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/angular-eslint.svg?style=flat-square" alt="GitHub license" /></a>
<a href="https://www.npmjs.com/package/angular-eslint"><img src="https://img.shields.io/npm/dm/@angular-eslint/eslint-plugin.svg?style=flat-square" alt="NPM Downloads" /></a>
<a href="https://codecov.io/gh/angular-eslint/angular-eslint"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/angular-eslint/angular-eslint.svg?style=flat-square"></a>
<a href="http://commitizen.github.io/cz-cli/"><img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square" alt="Commitizen friendly" /></a>
</p>
Expand Down Expand Up @@ -50,10 +50,10 @@
ng new # --maybe --some --other --flags --here
```

3. **Change directory into your new workspace** and then use the Angular CLI to add `@angular-eslint/schematics`.
3. **Change directory into your new workspace** and then use the Angular CLI to add `angular-eslint`.

```sh
ng add @angular-eslint/schematics
ng add angular-eslint
```

...and that's it!
Expand All @@ -64,7 +64,7 @@ You will also see that it added the following in your angular.json:

```json
"cli": {
"schematicCollections": ["@angular-eslint/schematics"]
"schematicCollections": ["angular-eslint"]
}
```

Expand All @@ -74,13 +74,13 @@ Read the section on [Using ESLint by default when generating new Projects within

## Supported Angular CLI Versions

As of v12, we aligned the major version of `@angular-eslint` with Angular (and Angular CLI).
As of v12, we aligned the major version of the `@angular-eslint/` packages with Angular (and Angular CLI).

Therefore, as an example (because these versions may or may not exist yet when you read this):

- `@angular-eslint` packages at `16.x.x` and `@angular/cli@16.x.x` are compatible
- `@angular-eslint` packages at `17.x.x` and `@angular/cli@17.x.x` are compatible
- `@angular-eslint` packages at `18.x.x` and `@angular/cli@18.x.x` are compatible
- `@angular-eslint/` packages at `16.x.x` and `@angular/cli@16.x.x` are compatible
- `@angular-eslint/` packages at `17.x.x` and `@angular/cli@17.x.x` are compatible
- `@angular-eslint/` packages at `18.x.x` and `@angular/cli@18.x.x` are compatible
- ...and so on...

> NOTE: the exact minor and patch versions of each library represented here by `x`'s do not need to match each other, just the first (major) number
Expand Down Expand Up @@ -145,11 +145,11 @@ We publish a canary release on every successful merge to the `main` branch, so *

The latest version under the `latest` tag is:

<a href="https://www.npmjs.com/package/@angular-eslint/schematics"><img src="https://img.shields.io/npm/v/@angular-eslint/schematics/latest.svg?style=flat-square" alt="NPM Version" /></a>
<a href="https://www.npmjs.com/package/angular-eslint"><img src="https://img.shields.io/npm/v/angular-eslint/latest.svg?style=flat-square" alt="NPM Version" /></a>

The latest version under the `canary` tag **(latest commit to the `main` branch)** is:

<a href="https://www.npmjs.com/package/@angular-eslint/schematics"><img src="https://img.shields.io/npm/v/@angular-eslint/schematics/canary.svg?style=flat-square" alt="NPM Version" /></a>
<a href="https://www.npmjs.com/package/angular-eslint"><img src="https://img.shields.io/npm/v/angular-eslint/canary.svg?style=flat-square" alt="NPM Version" /></a>

(Note: The only exception to the automated publishes described above is when we are in the final phases of creating the next major version of the libraries - e.g. going from `1.x.x` to `2.x.x`. During these periods, we manually publish pre-releases until we are happy with it and promote it to `latest`.)

Expand All @@ -162,7 +162,7 @@ The latest version under the `canary` tag **(latest commit to the `main` branch)
If you want to add ESLint configuration (either a `eslint.config.js` file for flat config, or a `.eslintrc.json` file for eslintrc (`angular-eslint` will figure this out for you automatically) and an applicable `"lint"` target in your `angular.json`) to an existing Angular CLI project which does not yet have a linter set up, you can invoke the following schematic:

```sh
ng g @angular-eslint/schematics:add-eslint-to-project {{YOUR_PROJECT_NAME_GOES_HERE}}
ng g angular-eslint:add-eslint-to-project {{YOUR_PROJECT_NAME_GOES_HERE}}
```

> If you only have a single project in your Angular CLI workspace, the project name argument is optional
Expand All @@ -171,32 +171,32 @@ ng g @angular-eslint/schematics:add-eslint-to-project {{YOUR_PROJECT_NAME_GOES_H

## Using ESLint by default when generating new Projects within your Workspace

Regardless of whether or not you added `@angular-eslint` to a brand new workspace, or you added it in order to convert a project within an existing workspace, it is likely that _from now on_ you want any subsequent projects that you generate in your workspace to also use ESLint.
Regardless of whether or not you added `angular-eslint` to a brand new workspace, or you added it in order to convert a project within an existing workspace, it is likely that _from now on_ you want any subsequent projects that you generate in your workspace to also use ESLint.

In order to achieve this, `@angular-eslint` provides a set of custom generator schematics which sit on top of the default ones that the Angular CLI provides. They provide all the standard Angular CLI options, but just handle adding ESLint related configuration for you in each case.
In order to achieve this, `angular-eslint` provides a set of custom generator schematics which sit on top of the default ones that the Angular CLI provides. They provide all the standard Angular CLI options, but just handle adding ESLint related configuration for you in each case.

You can always invoke them directly by specifying the collection name as part of the generate command:

```sh
# To generate a new Angular app in the workspace using ESLint
ng g @angular-eslint/schematics:application
ng g angular-eslint:application
# To generate a new Angular library in the workspace using ESLint
ng g @angular-eslint/schematics:library
ng g angular-eslint:library
```

Or, alternatively, if you don't want to have to remember to set that collection prefix in front of the `:` every time, you can set the `schematicCollections` in your `angular.json` to start with `@angular-eslint/schematics`.
Or, alternatively, if you don't want to have to remember to set that collection prefix in front of the `:` every time, you can set the `schematicCollections` in your `angular.json` to start with `angular-eslint`.

You can either do that by hand by adjusting the JSON, or by running the following Angular CLI command:

```sh
ng config cli.schematicCollections "[\"@angular-eslint/schematics\"]"
ng config cli.schematicCollections "[\"angular-eslint\"]"
```

The final result in your `angular.json` will be something like this:

```json
"cli": {
"schematicCollections": ["@angular-eslint/schematics"]
"schematicCollections": ["angular-eslint"]
}
```

Expand Down
8 changes: 4 additions & 4 deletions e2e/src/__snapshots__/eslint-8--inline-template-fixer.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@ export class TestComponent {}

exports[`eslint-8--inline-template-fixer should generate the expected inline template fixer result 2`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular-eslint/builder": "0.0.0-e2e",
"@angular-eslint/eslint-plugin": "0.0.0-e2e",
"@angular-eslint/eslint-plugin-template": "0.0.0-e2e",
"@angular-eslint/schematics": "0.0.0-e2e",
"@angular-eslint/template-parser": "0.0.0-e2e",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"@typescript-eslint/eslint-plugin": "7.11.0",
"@typescript-eslint/parser": "7.11.0",
"eslint": "8.57.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
Expand Down
8 changes: 4 additions & 4 deletions ...shots__/eslint-8--new-workspace-create-application-false-ng-add-then-project.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

exports[`eslint-8--new-workspace-create-application-false-ng-add-then-project should pass linting when running ng-add before creating any projects 1`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular-eslint/builder": "0.0.0-e2e",
"@angular-eslint/eslint-plugin": "0.0.0-e2e",
"@angular-eslint/eslint-plugin-template": "0.0.0-e2e",
"@angular-eslint/schematics": "0.0.0-e2e",
"@angular-eslint/template-parser": "0.0.0-e2e",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"@typescript-eslint/eslint-plugin": "7.11.0",
"@typescript-eslint/parser": "7.11.0",
"eslint": "8.57.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
Expand Down
8 changes: 4 additions & 4 deletions ...shots__/eslint-8--new-workspace-create-application-false-project-then-ng-add.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

exports[`eslint-8--new-workspace-create-application-false-project-then-ng-add should pass linting when adding a project before running ng-add 1`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular-eslint/builder": "0.0.0-e2e",
"@angular-eslint/eslint-plugin": "0.0.0-e2e",
"@angular-eslint/eslint-plugin-template": "0.0.0-e2e",
"@angular-eslint/schematics": "0.0.0-e2e",
"@angular-eslint/template-parser": "0.0.0-e2e",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"@typescript-eslint/eslint-plugin": "7.11.0",
"@typescript-eslint/parser": "7.11.0",
"eslint": "8.57.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
Expand Down
10 changes: 5 additions & 5 deletions e2e/src/__snapshots__/eslint-8--new-workspace.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@

exports[`eslint-8--new-workspace should pass linting after creating a new workspace from scratch using angular-eslint 1`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular-eslint/builder": "0.0.0-e2e",
"@angular-eslint/eslint-plugin": "0.0.0-e2e",
"@angular-eslint/eslint-plugin-template": "0.0.0-e2e",
"@angular-eslint/schematics": "0.0.0-e2e",
"@angular-eslint/template-parser": "0.0.0-e2e",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"@typescript-eslint/eslint-plugin": "7.11.0",
"@typescript-eslint/parser": "7.11.0",
"eslint": "8.57.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"ng-packagr": "^18.X.X",
"ng-packagr": "^19.X.X",
"typescript": "~5.X.X"
}
`;
Expand Down
8 changes: 4 additions & 4 deletions e2e/src/__snapshots__/inline-template-fixer.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ export class TestComponent {}

exports[`inline-template-fixer should generate the expected inline template fixer result 2`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"angular-eslint": "0.0.0-e2e",
"eslint": "^9.15.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
Expand Down
8 changes: 4 additions & 4 deletions ...src/__snapshots__/new-workspace-create-application-false-ng-add-then-project.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

exports[`new-workspace-create-application-false-ng-add-then-project should pass linting when running ng-add before creating any projects 1`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"angular-eslint": "0.0.0-e2e",
"eslint": "^9.15.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
Expand Down
8 changes: 4 additions & 4 deletions ...src/__snapshots__/new-workspace-create-application-false-project-then-ng-add.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

exports[`new-workspace-create-application-false-project-then-ng-add should pass linting when adding a project before running ng-add 1`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"angular-eslint": "0.0.0-e2e",
"eslint": "^9.15.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
Expand Down
10 changes: 5 additions & 5 deletions e2e/src/__snapshots__/new-workspace-type-module.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

exports[`new-workspace-type-module should pass linting after creating a new workspace from scratch using @angular-eslint 1`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"angular-eslint": "0.0.0-e2e",
"eslint": "^9.15.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"ng-packagr": "^18.X.X",
"ng-packagr": "^19.X.X",
"typescript": "~5.X.X",
"typescript-eslint": "8.16.0"
}
Expand Down
10 changes: 5 additions & 5 deletions e2e/src/__snapshots__/new-workspace.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

exports[`new-workspace should pass linting after creating a new workspace from scratch using @angular-eslint 1`] = `
{
"@angular-devkit/build-angular": "^18.X.X",
"@angular/cli": "^18.X.X",
"@angular/compiler-cli": "^18.X.X",
"@angular-devkit/build-angular": "^19.X.X",
"@angular/cli": "^19.X.X",
"@angular/compiler-cli": "^19.X.X",
"@types/jasmine": "~5.1.0",
"angular-eslint": "0.0.0-e2e",
"eslint": "^9.15.0",
"jasmine-core": "~5.2.0",
"jasmine-core": "~5.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"ng-packagr": "^18.X.X",
"ng-packagr": "^19.X.X",
"typescript": "~5.X.X",
"typescript-eslint": "8.16.0"
}
Expand Down
21 changes: 19 additions & 2 deletions nx.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"plugin": "@nx/js/typescript",
"include": [
"packages/builder/**",
"packages/bundled-angular-compiler/**",
"packages/eslint-plugin-template/**",
"packages/eslint-plugin/**"
],
Expand All @@ -24,7 +25,6 @@
"exclude": [
"*",
"packages/builder/**",
"packages/bundled-angular-compiler/**",
"packages/eslint-plugin-template/**",
"packages/eslint-plugin/**",
"packages/nx-plugin/**",
Expand Down Expand Up @@ -55,20 +55,37 @@
},
"targetDefaults": {
"build": {
"dependsOn": ["^build"],
"dependsOn": ["^build", "^compile"],
"inputs": ["production", "^production"],
"cache": true
},
"compile": {
"dependsOn": ["^build", "^compile"],
"inputs": ["production", "^production"],
"cache": true
},
"update-rule-docs": {
"dependsOn": ["^build"],
"inputs": [
"default",
"{workspaceRoot}/tools/scripts/generate-rule-docs.ts"
],
"cache": true
},
"update-rule-lists": {
"dependsOn": ["^build"],
"inputs": [
"default",
"{workspaceRoot}/tools/scripts/generate-rule-lists.ts"
],
"cache": true
},
"update-rule-configs": {
"dependsOn": ["^build"],
"inputs": [
"default",
"{workspaceRoot}/tools/scripts/generate-rule-configs.ts"
],
"cache": true
},
"lint": {
Expand Down
Loading