Monorepo for all the tooling related to using ESLint with Angular

Overview

angular-eslint-logo

Angular ESLint

Monorepo for all the tooling which enables ESLint to lint Angular projects

Build Status NPM Version GitHub license NPM Downloads Codecov Commitizen friendly


This project is made possible thanks to the continued hard work going into https://github.com/typescript-eslint/typescript-eslint, and brilliant work on the original TSLint rule implementations in https://github.com/mgechev/codelyzer.


Quick Start with Angular v12 and later

  1. Follow the latest Getting Started guide on https://angular.io/ in order to install the Angular CLI

  2. Create a new Angular CLI workspace in the normal way, optionally using any of the supported command line arguments and following the interactive prompts:

ng new # --maybe --some --other --flags --here
  1. Change directory into your new workspace and then use the Angular CLI to add @angular-eslint/schematics.
ng add @angular-eslint/schematics

...and that's it!

As well as installing all relevant dependencies, the ng add command will automatically detect that you have a workspace with a single project in it, which does not have a linter configured yet. It can therefore go ahead and wire everything up for you!

You will also see that it added the following in your angular.json:

  "cli": {
    "defaultCollection": "@angular-eslint/schematics"
  }

Read the section on Using ESLint by default when generating new Projects within your Workspace to understand why this is useful.


Quick Start with Angular before v12

  1. Follow the latest Getting Started guide on https://angular.io/ in order to install the Angular CLI

  2. Create a new Angular CLI workspace in the normal way, optionally using any of the supported command line arguments and following the interactive prompts:

ng new # --maybe --some --other --flags --here
  1. Change directory into your new workspace and then use the Angular CLI to add @angular-eslint/schematics:
ng add @angular-eslint/schematics
  1. Before v12, the Angular CLI shipped with a TSLint setup, so you should run the conversion schematic to automatically convert your new project from TSLint to ESLint:
ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config

NOTES:

  • We set --remove-tslint-if-no-more-tslint-targets so that we remove TSLint and Codelyzer from the workspace automatically.
  • We set --ignore-existing-tslint-config so that we jump straight to the up to date recommended ESLint setup, without converting the previous Angular CLI TSLint setup, which is unnecessary for brand new projects.

If you stick to those exact commands above you will also see the following in your angular.json:

  "cli": {
    "defaultCollection": "@angular-eslint/schematics"
  }

Read the section on Using ESLint by default when generating new Projects within your Workspace to understand why this is useful.


Supported Angular CLI Versions

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

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

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

For an understanding of Angular CLI version support prior to v12, please see ./docs/ANGULAR_VERSION_SUPPORT.md

Please do not open issues related to unsupported versions of the Angular CLI.


Usage with Nx Monorepos

Nx leans on some, but not all of the packages from this project.

Specifically:

  • It does not use the builder to execute ESLint
  • It does not use the schematics to generate files and config, and is responsible for configuring ESLint via .eslintrc.json files in a way that makes sense for Nx workspaces.

We strongly recommend that you do not try and hand-craft setups with angular-eslint and Nx. It is easy to get things wrong.

  • If using Angular CLI, use the angular-eslint tooling as instructed below
  • If using Nx, defer to the Nx tooling itself to configure things for you, it has been designed and tested specifically for this purpose.

Issues specific to Nx's support of Angular + ESLint should be filed on the Nx repo: https://github.com/nrwl/nx


Packages included in this project

Please follow the links below for the packages you care about.

  • @angular-eslint/builder - An Angular CLI Builder which is used to execute ESLint on your Angular projects using standard commands such as ng lint

  • @angular-eslint/eslint-plugin - An ESLint-specific plugin that contains rules which are specific to Angular projects. It can be combined with any other ESLint plugins in the normal way.

  • @angular-eslint/template-parser - An ESLint-specific parser which leverages the @angular/compiler to allow for custom ESLint rules to be written which assert things about your Angular templates.

  • @angular-eslint/eslint-plugin-template - An ESLint-specific plugin which, when used in conjunction with @angular-eslint/template-parser, allows for Angular template-specific linting rules to run.

  • @angular-eslint/schematics - Schematics which are used to add and update configuration files which are relevant for running ESLint on an Angular workspace.


Package Versions

All of the packages are published with the same version number to make it easier to coordinate both releases and installations.

We publish a canary release on every successful merge to master, so you never need to wait for a new stable version to make use of any updates.

The latest version under the latest tag is:

NPM Version

The latest version under the canary tag (latest commit to master) is:

NPM Version

(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 canary releases until we are happy with the release and promote it to latest.)


Adding ESLint configuration to an existing Angular CLI project which has no existing linter

NOTE: If you are looking for instructions on how to migrate a project which uses TSLint, please see the next section.

If you want to add ESLint configuration (a .eslintrc.json file 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:

ng g @angular-eslint/schematics: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


Migrating an Angular CLI project from Codelyzer and TSLint

We have some tooling to make this as automated as possible, but the reality is it will always be somewhat project-specific as to how much work will be involved in the migration.

Step 1 - Add relevant dependencies

The first step is to run the schematic to add @angular-eslint to your project:

ng add @angular-eslint/schematics

This will handle installing the latest version of all the relevant packages for you and adding them to the devDependencies of your package.json.

Step 2 - Run the convert-tslint-to-eslint schematic on a project

If you just have a single project in your workspace you can just run:

ng g @angular-eslint/schematics:convert-tslint-to-eslint

If you have a projects/ directory or similar in your workspace, you will have multiple entries in your projects configuration and you will need to chose which one you want to migrate using the convert-tslint-to-eslint schematic:

ng g @angular-eslint/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}}

The schematic will do the following for you:

  • Read your chosen project's tslint.json and use it to CREATE a .eslintrc.json at the root of the specific project which extends from the root config (if you do not already have a root config, it will also add one automatically for you).
    • The contents of this .eslintrc.json will be the closest possible equivalent to your tslint.json that the tooling can figure out.
    • You will want to pay close attention to the terminal output of the schematic as it runs, because it will let you know if it couldn't find an appropriate converter for a TSLint rule, or if it has installed any additional ESLint plugins to help you match up your new setup with your old one.
  • UPDATE the project's architect configuration in the angular.json to such that the lint "target" will invoke ESLint instead of TSLint.
  • UPDATE any instances of tslint:disable comments that are located within your TypeScript source files to their ESLint equivalent.
  • If you choose YES (the default) for the --remove-tslint-if-no-more-tslint-targets option, it will also automatically remove TSLint and Codelyzer from your workspace if you have no more usage of them left.

Now when you run:

npx ng lint {{YOUR_PROJECT_NAME_GOES_HERE}}

...you are running ESLint on your project! ๐ŸŽ‰


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.

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 removing the default TSLint configuration for you and adding ESLint in each case.

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

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

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 default collection in your angular.json to be @angular-eslint/schematics.

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

ng config cli.defaultCollection @angular-eslint/schematics

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

  "cli": {
    "defaultCollection": "@angular-eslint/schematics"
  }

Now your generate commands can just be:

# To generate a new Angular app in the workspace using ESLint (thanks to the defaultCollection set above)
ng g app
# To generate a new Angular library in the workspace using ESLint (thanks to the defaultCollection set above)
ng g lib

Notes on Supported ESLint Configuration File Types

We strongly recommend you stick to using .eslintrc.json.

This is not a constraint we force upon you, and you are more than welcome to use any of ESLint's supported file types for your ESLint config files, e.g. .eslintrc.js, .eslintrc.yml however please note that you will not receive any automated updates to your config from this toolset if you choose to use something other than .eslintrc.json. We will also only generate .eslintrc.json files from our code generators (which you could then convert yourself if you wanted to).

The reason for this is very simple - JSON is a format which is very easy to statically analyze and write transformations for and it is beyond the scope of this community-run project to provide multiple implementations of every possible migration for every possible ESLint configuration file type for every version we release.


Notes on ESLint Configuration Itself

It's important to understand up front that using Angular with ESLint is actually an advanced/complex use-case because of the nature of the files involved:

  • Angular projects use TypeScript files for source code
  • Angular projects use a custom/extended form of HTML for templates (be they inline or external HTML files)

The thing is: ESLint understands neither of these things out of the box.

Fortunately, however, ESLint has clearly defined points of extensibility that we can leverage to make this all work.

For detailed information about ESLint plugins, parsers etc please review the official ESLint documentation: https://eslint.org

The key principle of our configuration required for Angular projects is that we need to run different blocks of configuration for different file types/extensions. In other words, we don't want the same rules to apply on TypeScript files that we do on HTML/inline-templates.

Therefore, the critical part of our configuration is the "overrides" array:

{
  "overrides": [
    /**
     * -----------------------------------------------------
     * TYPESCRIPT FILES (COMPONENTS, SERVICES ETC) (.ts)
     * -----------------------------------------------------
     */
    {
      "files": ["*.ts"],

      // ... applies a special processor to extract inline Component templates
      // and treat them like HTML files
      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]

      // ... other config specific to TypeScript files
    },

    /**
     * -----------------------------------------------------
     * COMPONENT TEMPLATES
     * -----------------------------------------------------
     */
    {
      "files": ["*.html"],
      // ... config specific to Angular Component templates
    }
  ]
}

By setting up our config in this way, we have complete control over what rules etc apply to what file types and our separate concerns remain clearer and easier to maintain.

Seriously, move (mostly) all configuration into overrides

Even though you may be more familiar with including ESLint rules, plugins etc at the top level of your config object, we strongly recommend only really having overrides (and a couple of other things like ignorePatterns, root etc) at the top level and including all plugins, rules etc within the relevant block in the overrides array.

Anything you apply at the top level will apply to ALL files, and as we've said above there is a really strict separation of concerns between source code and templates in Angular projects, so it is very rare that things apply to all files.

Let's take a look at full (but minimal), manual example of a config file (although we recommend deferring to the schematics for automatic config generation whenever possible):

.eslintrc.json

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        // This is required if you use inline templates in Components
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        /**
         * Any TypeScript source code (NOT TEMPLATE) related rules you wish to use/reconfigure over and above the
         * recommended set provided by the @angular-eslint project would go here.
         */
        "@angular-eslint/directive-selector": [
          "error",
          { "type": "attribute", "prefix": "app", "style": "camelCase" }
        ],
        "@angular-eslint/component-selector": [
          "error",
          { "type": "element", "prefix": "app", "style": "kebab-case" }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {
        /**
         * Any template/HTML related rules you wish to use/reconfigure over and above the
         * recommended set provided by the @angular-eslint project would go here.
         */
      }
    }
  ]
}

If I wanted to include other source code related rules extends etc, such as extending from eslint:recommended, then I would include that in the "extends": [] within the *.ts override block, NOT the root of the config object.

Our schematics already do the "right" thing for you automatically in this regard, but if you have to configure things manually for whatever reason, a full reference configuration example can be found in the manual integration test located within this monorepo. Check out the relevant configuration files:

If you are looking for general help in migrating specific rules from TSLint to ESLint, you can check out this incredible project that we depend on in our conversion schematic: https://github.com/typescript-eslint/tslint-to-eslint-config

Premade configs provided by this project

We have several premade configs within this project which you can extend from (and indeed the configs generated by our schematics do just that). For more information about the configs, check out their READMEs

Going fully manual (not recommended)

Our premade configs handle the parser and plugins options for you behind the scenes so that your final config can be more concise.

If for some reason you wanted to not include any of the premade recommended configs, or you wanted to significantly customize your setup, a fully manual example with the right parsers and plugins wired up (but no actual rules activated) would look like this:

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "project": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "plugins": ["@typescript-eslint", "@angular-eslint"],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "parser": "@angular-eslint/template-parser",
      "plugins": ["@angular-eslint/template"],
      "rules": {}
    }
  ]
}

Notes for eslint-plugin-prettier users

Prettier is an awesome code formatter which can be used entirely independently of linting.

Some folks, however, like to apply prettier by using it inside of ESLint, using eslint-plugin-prettier. If this applies to you then you will want to read this section on how to apply it correctly for HTML templates. Make sure you read and fully understand the information above on the importance of "overrides" before reading this section.

When using eslint-plugin-prettier, in order to get the full range of scenarios working, namely:

  • ESLint + prettier together should work on Components with external templates
  • ESLint + prettier together should work on the external template HTML files themselves
  • ESLint + prettier together should work on Components with inline templates

We need to use two different overrides for HTML: one which applies @angular-eslint/template rules, one which applies prettier.

Do not apply @angular-eslint/template rules and prettier within the same override block.

The reason for this is down to the internals of the special ESLint processor for inline Component templates mentioned in the overrides section above and the hidden files it generates behind the scenes. Those files have names which match this pattern *inline-template-*.component.html and so we need to get eslint-plugin-prettier to ignore those files, otherwise it will get confused about them not existing directly in your project.

Here is a fully working (tested in VSCode and on the command line via ng lint) example:

.eslintrc.json

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json", "e2e/tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {}
    },
    // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        // NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
  ]
}

We are setting the parser for eslint-plugin-prettier explicitly within our relevant override block so that it does not need to rely on inference. In this case we know it should always use its angular parser, because we are wiring it up to only run on angular HTML files within that override. (it's assumed that all HTML files in the project are angular templates)


Linting HTML files and inline-templates with the VSCode extension for ESLint

If you use vscode-eslint, and want to lint HTML files and inline-templates on your Angular Components, you will need to make sure you add the following to your VSCode settings.json:

// ... more config

"eslint.options": {
  "extensions": [".ts", ".html"]
},

// ... more config

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "html"
],

// ... more config

Please see the following issue for more information: https://github.com/microsoft/vscode-eslint/issues/922


Usage without Angular CLI Builder

If you're using this without the Angular CLI Builder don't forget to include .html as one of the file extensions when running the eslint CLI, otherwise templates will not be linted, e.g.:

eslint --ext .ts,.html .

Notes on performance

Background and understanding the trade-offs

As you have hopefully understood from the above section on ESLint configuration what we are dealing with here is a set of tools that were not designed and optimized for this specific use-case.

In software development we are permanently faced with trade-offs. In this case you can think about it this way:

On the one hand...

By using ESLint with Angular (both its TypeScript source code, and its HTML templates), we gain access to a truly massive ecosystem of existing rules, plugins and IDE extensions that we can instantly leverage on our projects.

On the other...

The tooling will never be as fast or memory efficient, or as easy to configure, as something which was purpose built for a narrower use-case and which, well, does less...

TSLint was more in the latter camp - it was purpose built for linting TypeScript source code (note, not HTML), and so it was (depending on the codebase) faster and more efficient at doing it - but it was hugely lacking in community support, features, plugins, rules etc...

Ok, so now we know which side of this particular trade-off we are on. That's an important start.

ESLint configs and performance

Given the increased complexity around configuration, it is possible to end up with non-performant setups if we are not careful.

The first thing is to understand that if you are majorly deviating from the configs that this tooling generates for you automatically, you are greatly increasing the risk of you running into those issues.

The most important piece of ESLint configuration with regards to performance is the parserOptions.project option.

It is what informs typescript-eslint what tsconfigs should be used to create TypeScript Programs behind the scenes as the lint process runs. Without this, it would not be possible to leverage rules which take advantage of type information, we could only lint based on raw syntax.

If parserOptions.project has been configured, by default typescript-eslint will take this as a sign that you only want to lint files that are captured within the scope of the TypeScript Programs which are created. For example, let's say you have a tsconfig.json that contains the following:

{
  // ...more config
  "include" [
    "src/**/*.ts"
  ]
}

If you provide that file as a reference for typescript-eslint, it will conclude that you only want to lint .ts files within src/. If you attempt to lint a file outside of this pattern, it will error. Seems reasonable, right?

Unfortunately, for us in the context of the Angular CLI, we have an added complication. The Angular CLI generates one or more files which are not included in any tsconfig scopes (such as environment.prod.ts).

To prevent this causing errors for users, we therefore enable the createDefaultProgram option for typescript-eslint when we generate your config (it's false by default). This flag tells typescript-eslint not to error in the case in finds a file not in a Program, and instead create a whole new Program to encapsulate that file and then carry on.

This is not ideal, but it works. However, can you see what we've now exposed ourselves to by enabling this?

Now if we run linting - any files which are included in the lint run (e.g. by the glob patterns in the builder config in angular.json) will be linted, and if they are not in scope of an existing tsconfig a whole new Program will be created for each one of them.

Having patterns which do not makes sense together (files to lint vs provided tsconfigs) is usually how seriously non-performant setups can originate from your config. For small projects creating Programs takes a matter of seconds, for large projects, it can take far longer (depending on the circumstances).

Here are some steps you can take if you're linting process feels "unreasonably" slow:

  • Run the process with debug information from typescript-eslint enabled:
DEBUG=typescript-eslint:* ng lint
  • Full explanation of this command:
    • ng lint is being invoked as normal (you would run the full command above in the same way you run ng lint normally in whatever terminal you use), but we are also setting an environment variable called DEBUG, and giving it a value of typescript-eslint:*.
    • DEBUG is a relatively common environment variable because it is supported by some common logging/debugging libraries as a way to toggle how verbose the overall output is at runtime.
    • The value of typescript-eslint:* will get picked up by the logger within the typescript-eslint library and cause it to log very verbosely to the standard output of your terminal as it executes.

You will now see a ton of logs which were not visible before. The two most common issues to look out for are:

  • If you see a lot of logs saying that particular files are not being found in existing Programs (the scenario we described above) and default Programs have to be created
  • If you see files included for a project that should not be

If you are still having problems after you have done some digging into these, feel free to open and issue to discuss it further, providing as much context as possible (including the logs from the command above).




The ultimate fallback solution to performance problems caused by the Program issues described above is to stop piggybacking on your existing tsconfig files (such as tsconfig.app.json, tsconfig.spec.json etc), and instead create a laser-focused, dedicated tsconfig file for your ESLint use-case:

  • Create a new tsconfig file at the root of the project within the workspace (e.g. a clear name might be tsconfig.eslint.json)
  • Set the contents of tsconfig.eslint.json to:
    • extend from any root/base tsconfig you may have which sets important compilerOptions
    • directly include files you care about for linting purposes

For example, it may look like:

tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "include": [
    // adjust "includes" to what makes sense for you and your project
    "src/**/*.ts",
    "e2e/**/*.ts"
  ]
}
  • Update your project's .eslintrc.json to use the new tsconfig file instead of its existing setting.

For example, the diff might look something like this:

  "parserOptions": {
    "project": [
-     "tsconfig.app.json",
-     "tsconfig.spec.json",
-     "e2e/tsconfig.json"
+     "tsconfig.eslint.json"
    ],
-   "createDefaultProgram": true
+   "createDefaultProgram": false
  },

As you can see, we are also setting "createDefaultProgram" to false because in this scenario we have full control over what files will be included in the Program created behind the scenes for our lint run and we should never need that potentially expensive auto-fallback again. (NOTE: You can also just remove the "createDefaultProgram" setting altogether because its default value is false).

If you are not sure what "createDefaultProgram" does, please reread the section above on ESLint Configs and Performance.


Using eslint-disable comments in Angular templates

If you want to be able to use eslint-disable comments in your Angular templates you just need to ensure you are using:

  • @angular CLI tooling packages version 11.2.8 or higher
  • @angular-eslint tooling packages version 2.1.0 or higher

Make sure you are using valid HTML comments, i.e. , not the kind of comments you use in TypeScript code.


Status of Codelyzer Rules Conversion

The table below shows the status of each Codelyzer Rule in terms of whether or not an equivalent for it has been created within @angular-eslint.

If you see a rule below that has no status against it, then please feel free to open a PR with an appropriate implementation. You can look at the Codelyzer repo and the existing plugins within this repo for inspiration.

Explanation of Statuses
โœ… = We have created an ESLint equivalent of this TSLint rule
๐Ÿšง = There is an open PR to provide an ESLint equivalent of this TSLint rule
๐Ÿ™… = This TSLint rule has been replaced by functionality within the Angular compiler, or should be replaced by a dedicated code formatter, such as Prettier

Functionality

Codelyzer Rule ESLint Equivalent Status
contextual-decorator @angular-eslint/contextual-decorator โœ…
contextual-lifecycle @angular-eslint/contextual-lifecycle โœ…
no-attribute-decorator @angular-eslint/no-attribute-decorator โœ…
no-lifecycle-call @angular-eslint/no-lifecycle-call โœ…
no-output-native @angular-eslint/no-output-native โœ…
no-pipe-impure @angular-eslint/no-pipe-impure โœ…
prefer-on-push-component-change-detection @angular-eslint/prefer-on-push-component-change-detection โœ…
template-accessibility-alt-text @angular-eslint/template/accessibility-alt-text โœ…
template-accessibility-elements-content @angular-eslint/template/accessibility-elements-content โœ…
template-accessibility-label-for @angular-eslint/template/accessibility-label-for โœ…
template-accessibility-tabindex-no-positive @angular-eslint/template/no-positive-tabindex โœ…
template-accessibility-table-scope @angular-eslint/template/accessibility-table-scope โœ…
template-accessibility-valid-aria @angular-eslint/template/accessibility-valid-aria โœ…
template-banana-in-box @angular-eslint/template/banana-in-box โœ…
template-click-events-have-key-events @angular-eslint/template/click-events-have-key-events โœ…
template-mouse-events-have-key-events @angular-eslint/template/mouse-events-have-key-events โœ…
template-no-any @angular-eslint/template/no-any โœ…
template-no-autofocus @angular-eslint/template/no-autofocus โœ…
template-no-distracting-elements @angular-eslint/template/no-distracting-elements โœ…
template-no-negated-async @angular-eslint/template/no-negated-async โœ…
use-injectable-provided-in @angular-eslint/use-injectable-provided-in โœ…
use-lifecycle-interface @angular-eslint/use-lifecycle-interface โœ…

Maintainability

Codelyzer Rule ESLint Equivalent Status
component-max-inline-declarations @angular-eslint/component-max-inline-declarations โœ…
no-conflicting-lifecycle @angular-eslint/no-conflicting-lifecycle โœ…
no-forward-ref @angular-eslint/no-forward-ref โœ…
no-input-prefix @angular-eslint/no-input-prefix โœ…
no-input-rename @angular-eslint/no-input-rename โœ…
no-output-on-prefix @angular-eslint/no-output-on-prefix โœ…
no-output-rename @angular-eslint/no-output-rename โœ…
no-unused-css
prefer-output-readonly @angular-eslint/prefer-output-readonly โœ…
relative-url-prefix @angular-eslint/relative-url-prefix โœ…
template-conditional-complexity @angular-eslint/template/conditional-complexity โœ…
template-cyclomatic-complexity @angular-eslint/template/cyclomatic-complexity โœ…
template-i18n @angular-eslint/template/i18n โœ…
template-no-call-expression @angular-eslint/template/no-call-expression โœ…
template-use-track-by-function @angular-eslint/template/use-track-by-function โœ…
use-component-selector @angular-eslint/use-component-selector โœ…
use-component-view-encapsulation @angular-eslint/use-component-view-encapsulation โœ…
use-pipe-decorator N/A, see explanation above ๐Ÿ™…
use-pipe-transform-interface @angular-eslint/use-pipe-transform-interface โœ…

Style

Codelyzer Rule ESLint Equivalent Status
angular-whitespace N/A, see explanation above ๐Ÿ™…
component-class-suffix @angular-eslint/component-class-suffix โœ…
component-selector @angular-eslint/component-selector โœ…
directive-class-suffix @angular-eslint/directive-class-suffix โœ…
directive-selector @angular-eslint/directive-selector โœ…
import-destructuring-spacing N/A, see explanation above ๐Ÿ™…
no-host-metadata-property @angular-eslint/no-host-metadata-property โœ…
no-inputs-metadata-property @angular-eslint/no-inputs-metadata-property โœ…
no-outputs-metadata-property @angular-eslint/no-outputs-metadata-property โœ…
no-queries-metadata-property @angular-eslint/no-queries-metadata-property โœ…
pipe-prefix @angular-eslint/pipe-prefix โœ…
prefer-inline-decorator N/A, see explanation above ๐Ÿ™…
Comments
  • Unable to convert from TSLint to ESLint with tslint-to-eslint-config 2.7.0

    Unable to convert from TSLint to ESLint with tslint-to-eslint-config 2.7.0

    Hi guys,

    in this issue I described that I am not able to run the command to migrate from tslint to eslint.

    When I type ng g @angular-eslint/schematics:convert-tslint-to-eslint PROJECTNAME and check the defaults I get this error:

    There was a critical error when trying to inspect your tslint.json:
    
    env: node: No such file or directory
    

    I'm running this command on a mac, in a multiple projects workspace. My project is in the root folder, the tslint.json file too. Is there something I am missing?

    If I type npx tslint --print-config {PATH_TO_YOUR_TSLINT_JSON_HERE} as suggested I get a new tslint.json config, but that one doesn't work too.

    Many thanks in advance, Matthias

    bug blocked:tslint-to-eslint-config package: schematics 
    opened by mkurte 33
  • v13

    v13

    Update on v13 (as of Nov 3, 2021)

    The first prerelease has been published, anybody wanting to migrate to v13 can run:

    npx ng update @angular-eslint/schematics --next
    

    OR (for new workspaces)

    npx ng add @angular-eslint/[email protected]
    

    After they have already upgraded to Angular v13.

    Please note: more breaking changes are likely at this stage before we declare v13 of angular-eslint stable, so please be aware of that when deciding whether or not to upgrade.

    We will cut the stable release within the next week or so.

    The PR is here if you wish to subscribe for updates: https://github.com/angular-eslint/angular-eslint/pull/780


    This is the summary issue for work which will be included in v13 of the @angular-eslint/* packages.

    The primary goals are:

    • [x] Support angular 13
    • [x] Support typescript-eslint 5
    • [x] Support eslint 8
    • [x] Support TypeScript 4.4

    We will look to include other minor work which require breaking changes alongside this, but those are the priority items.

    We will create a v13 branch and publish prereleases from it alongside patches to v12 from the master branch until angular-eslint v13 is deemed stable.


    ~Update on supporting Angular 13 (as of Oct 25, 2021)~

    ~Between me and the Angular Team we have decided to start bundling the @angular/compiler within the @angular-eslint repo as a new package (which should never need to care about) called @angular-eslint/bundled-angular-compiler.~

    ~As reported below, the original reason to consider this was the fact that the Angular Team has stopped publishing bundles which can be synchronously required in node as of v13, but actually in discussing it further with the team there is another important reason to start bundling ourselves - they are planning on making a larger number of breaking changes to the internals of the compiler from v13 onwards, and the APIs we depend on are not officially part of the public API and so are not subject to the normal major version schedule.~

    ~Thanks to Alan from the Angular Tooling Team, we have already landed the new package and the way is now clear to focus on the remaining breaking changes related to Angular 13.~

    ~Notes on supporting Angular 13 (as of Oct 17, 2021)~

    ~Currently in the v13 prereleases the Angular Team has dropped all non-ESM artifacts from the packages. This is a huge problem for us because ESLint will not allow any of our tooling to be async and we therefore cannot resolve the runtime elements of @angular/compiler we need from node_modules in a way that is compatible with Node 12, which is still not EOL and is rightly supported by ESLint.~

    ~As things stand we would need to bundle an exact patch version of the @angular/compiler ourselves and keep this up to date.~

    ~I have written to the Angular Team on this point.~

    BREAKING CHANGE 
    opened by JamesHenry 29
  • feat(schematics): new convert-tslint-to-eslint schematic

    feat(schematics): new convert-tslint-to-eslint schematic

    This PR adds the long awaited convert-tslint-to-eslint schematic for automatically converting an Angular CLI project from using TSLint to using an ESLint setup which most closely mirrors it.

    This PR contains breaking changes around the recommended config from @angular-eslint/eslint-plugin to bring it more inline with what the latest Angular CLI generates out of the box. It is therefore going to become the v0.7.0-beta.0 release when it is complete.

    For now, the work on this PR is being published to the next tag on npm and using alpha as the suffix to differentiate it from the betas on latest.

    To use this code today (you can find the value for {{YOUR_PROJECT_NAME}} in your angular.json):

    ng add @angular-eslint/[email protected]
    
    npx ng g @angular-eslint/schematics:convert-tslint-to-eslint --project {{YOUR_PROJECT_NAME}}
    
    # This is now powered by ESLint! Check out your new root level .eslintrc.json config that the schematic created
    npx ng lint
    

    Real-world feedback wanted

    Please, please, please use this on your single-project Angular CLI workspaces today and report any issues or rough edges you may encounter ๐Ÿ™ This is just static analysis tooling after all, there is no risk to your users by you trying this out. If things don't look or function quite right you can also just not commit the changes that the schematic makes!

    We are never going to be able to make something which handles every case, but we are already at a point where things are looking pretty good for the common case!

    PS Thank you to @JoshuaKGoldberg for his openness to collaboration and to making the necessary changes to tslint-to-eslint-config to make it useable in the schematic context

    opened by JamesHenry 25
  • docs(readme): add initial content to Rules List

    docs(readme): add initial content to Rules List

    Fixes #41

    Please let me know if I've missed anything. I wasn't sure of the best place to put this so I mirrored the typescript-eslint project. Happy to make any adjustments as needed.

    I marked the rules I saw with PRs as WIP. Let me know if there's something else you'd like to track on this page.

    opened by nzacca 23
  • Type-check rules cause errors when using `ng lint`

    Type-check rules cause errors when using `ng lint`

    Steps to reproduce

    1. Run the commands

      ng new sample-application
      ng add @angular-eslint/schematics
      
    2. Change angular.json's projects:sample-app:architect:lint property to:

      	"lint": {
      	  "builder": "@angular-eslint/builder:lint",
      	  "options": {
      	    "eslintConfig": ".eslintrc.js",
      	    "tsConfig": [
      	      "tsconfig.app.json",
      	      "tsconfig.spec.json",
      	      "e2e/tsconfig.json"
      	    ],
      	    "exclude": ["**/node_modules/**"]
      	  }
      	},
      
    3. Create a .eslintrc.js file with:

      	module.exports = {
      	  extends: [
      	    // comment this next line out to see no errors occur
      	    "plugin:@typescript-eslint/recommended-requiring-type-checking",
      	    "plugin:@angular-eslint/recommended",
      	  ],
      	  plugins: ["@typescript-eslint", "@angular-eslint"],
      	};
      
    4. Run the command

      ng lint
      

    Output

    An unhandled exception occurred: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
    Occurred while linting 
    

    Other notes

    I created a repository to reproduce this issue. It can be found here: https://github.com/delasteve/eslint-angular-issue-sample-repo

    I'm also trying to figure out if this next error is an angular-eslint issue or something else. If you swap the order of the extends array so that plugin:@angular-eslint/recommended is first, you will receive the following error:

    D:\development\sample-app\src\app\app.component.html
      0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
    The file does not match your project config: src\app\app.component.html.
    The extension for the file (.html) is non-standard. You should add "parserOptions.extraFileExtensions" to your config
    
    opened by delasteve 22
  • 1.0.0

    1.0.0

    The tooling in this monorepo has been working pretty well for a while now and is already downloaded a lot.

    Updated to three items now that ESLint 7 and typescript-eslint 3 are out

    Update 2: Please see https://github.com/angular-eslint/angular-eslint/issues/86#issuecomment-661665652 for a brief update on my personal situation, I cannot comment on the current availability of my co-contributors

    Update 3 (Oct 2, 2020): Upgraded to latest Angular 10.1 and TypeScript 4

    In my view, we can promote this tooling to 1.0.0 once we have the following ~two~ three items in place:


    • [x] Update to Angular 10, ESLint 7.x, TypeScript 3.9 and typescript-eslint 3.x

      • Done as of v0.1.0-beta.1

    • [x] Update to Angular 10.1, TypeScript 4 and typescript-eslint 4.x

      • Done as of v0.5.0-beta.1

    ~~- [ ] Finalize recommended config~~ ~~- There is an initial recommended config in place as of v0.0.1-alpha.32 (https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin/src/configs/recommended.json) which is mostly a reflection of what is in the tslint.json that currently ships with the Angular CLI.~~ ~~- @mgechev I would be grateful for your input on this one so that we capture yours and the rest of the Angular Team's latest and greatest recommendations~~

    Update: this is not actually required for v1.0 as we will initially be focused on converting existing configs


    • [x] Add schematic for migrating an Angular CLI project from TSLint to ESLint
      • We can look into the possibility of integrating https://github.com/typescript-eslint/tslint-to-eslint-config within the execution of this schematic
      • cc @JoshuaKGoldberg
    opened by JamesHenry 19
  • `Program#body` is missing and breaks a lot of other rules

    `Program#body` is missing and breaks a lot of other rules

    Description and reproduction of the issue

    As title

    body is required in estree

    https://github.com/estree/estree/blob/master/es2015.md#programs

    https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/estree/index.d.ts#L65

    Versions

    | package | version | | ---------------------------------- | ------- | | @typescript-eslint | 4.24.0 | | TypeScript | 4.2.4 | | ESLint | 7.26.0 | | node | 12.22.1 |

    # Please run `npx ng version` in your project and paste the full output here:
    Angular CLI: 12.0.0
    Node: 12.22.1
    Package Manager: yarn 1.22.10
    OS: darwin x64
    
    Angular: 12.0.0
    ... compiler, core
    
    Package                      Version
    ------------------------------------------------------
    @angular-devkit/architect    0.1200.0 (cli-only)
    @angular-devkit/core         12.0.0 (cli-only)
    @angular-devkit/schematics   12.0.0 (cli-only)
    @schematics/angular          12.0.0 (cli-only)
    rxjs                         7.0.1
    typescript                   4.2.4
    
    • [x] I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.
    awaiting response package: template-parser 
    opened by JounQin 18
  • Crash when running ng lint

    Crash when running ng lint

    version: "0.0.1-alpha.23"

    > cat /private/var/folders/qx/l6dzbht15fj_s89bxrv7x7740000gp/T/ng-JaEvnr/angular-errors.log
    
    [error] TypeError: Cannot read property 'range' of undefined
        at /path/to/angular_project/node_modules/@angular-eslint/eslint-plugin-template/dist/index.js:1:1353
        at Array.map (<anonymous>)
        at postprocess (/path/to/angular_project/node_modules/@angular-eslint/eslint-plugin-template/dist/index.js:1:1156)
        at Linter._verifyWithProcessor (/path/to/angular_project/node_modules/eslint/lib/linter/linter.js:1311:16)
        at Linter._verifyWithConfigArray (/path/to/angular_project/node_modules/eslint/lib/linter/linter.js:1248:25)
        at Linter.verify (/path/to/angular_project/node_modules/eslint/lib/linter/linter.js:1210:25)
        at Linter.verifyAndFix (/path/to/angular_project/node_modules/eslint/lib/linter/linter.js:1400:29)
        at verifyText (/path/to/angular_project/node_modules/eslint/lib/cli-engine/cli-engine.js:230:48)
        at CLIEngine.executeOnFiles (/path/to/angular_project/node_modules/eslint/lib/cli-engine/cli-engine.js:798:28)
        at _lint (/path/to/angular_project/node_modules/@angular-eslint/builder/dist/index.js:1:4477)
    
    opened by dieend 18
  • feat(eslint-plugin): add rule 'sort-ngmodule-metadata-arrays' for array sort order of modules

    feat(eslint-plugin): add rule 'sort-ngmodule-metadata-arrays' for array sort order of modules

    This is a best practice we have implemented that simply enforces the sorting of identifiers in ngModule arrays. Not sure if non-codelyzer rules would be acceptable for this project, but thought I would give it a try.

    opened by blingerson 16
  • Project logo

    Project logo

    This is going to be the future of codelyzer.

    Feel free to post logo suggestions here. It'll be great if we can make it recognizable - something similar, but perhaps more modern than the official codelyzer logo:

    Logo

    opened by mgechev 16
  • feat(eslint-plugin-template): [no-inline-styles] add rule

    feat(eslint-plugin-template): [no-inline-styles] add rule

    It's (subjectively) good practice to separate styles from the view layout, when possible. This rule detects inline styles in angular templates and help to keep all css in one place (for example in .css files, or use tailwindcss classes). Also inline styles has different priority in CSS and that cause some bugs.

    I also found some rule https://github.com/Intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-inline-styles.md but that rule for JSX, and I created own using @angular-eslint tooling and in using angular-eslint style.

    Previously I create that rule as custom rule for my nx workspace rules (for our team needs), but have idea to share it with community.

    opened by pumano 15
  • New rule suggestion: no-restricted-attributes

    New rule suggestion: no-restricted-attributes

    Hi, while integrating the NgOptimizedImage directive (https://angular.io/guide/image-directive) I searched for a way to restrict the usage of the src attribute in the template in favour of the ngSrc attribute. This can be done via the rule "no-restricted-attrs" of another project: "HTML ESlint" (https://yeonjuan.github.io/html-eslint/docs/rules/no-restricted-attrs/), hovever, when already using "Angular ESLint" to lint HTML files, it is not possible to combine the parsers of both packages. So I think it is useful - not only for this use case - to provide such functionality in "Angular ESlint", too.

    The provided documentation of the other project (https://yeonjuan.github.io/html-eslint/docs/rules/no-restricted-attrs/) contains an example of how to use the rule (I'll provide another example of how it could look like below) and I think it is a very convenient way to configure which tags are allowed and which are not.

     {
      "rules": {
        "@html-angular/no-restricted-attributes": ["warn",  {
          "tagPatterns": ["^img$"],
          "attrPatterns": ["src.*"]
          "message": "consider using ngSrc instead of src"
      }]
      }
    }
    
    
    // Warning
    <img src="imageSource">
    
    // Correct
    <img ngSrc="imageSource">
    

    Versions

    | package | version | | ---------------------------------- | ------- | | @angular-eslint/eslint-plugin-template | 15.0.0 | | @angular-eslint/template-parser | 15.0.0 | | @typescript-eslint/parser | 5.43.0 | | ESLint | 8.27.0 | | node | 16.17.0 |

    # Please run `npx ng version` in your project and paste the full output here:
    Angular CLI: 15.0.0
    Node: 16.17.0
    Package Manager: npm 8.19.2
    OS: linux x64
    
    Angular: 
    ... 
    
    Package                      Version
    ------------------------------------------------------
    @angular-devkit/architect    0.1500.0 (cli-only)
    @angular-devkit/core         15.0.0 (cli-only)
    @angular-devkit/schematics   15.0.0 (cli-only)
    @schematics/angular          15.0.0 (cli-only)
    
    • [x] I have tried restarting my IDE and the issue persists.
    • [x] I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.
    package: eslint-plugin-template triage 
    opened by JulianMaus98 0
  • chore: update dependency verdaccio to v5.19.0

    chore: update dependency verdaccio to v5.19.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | verdaccio (source) | 5.18.0 -> 5.19.0 | age | adoption | passing | confidence |


    Release Notes

    verdaccio/verdaccio

    v5.19.0

    Compare Source

    Features
    Bug Fixes

    Configuration

    ๐Ÿ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    ๐Ÿšฆ Automerge: Disabled by config. Please merge this manually once you are satisfied.

    โ™ป Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    ๐Ÿ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
  • fix: update dependency ignore to v5.2.4

    fix: update dependency ignore to v5.2.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | ignore | 5.2.1 -> 5.2.4 | age | adoption | passing | confidence |


    Release Notes

    kaelzhang/node-ignore

    v5.2.4

    Compare Source

    • PATCH fixes normal single asterisk and normal consecutive asterisks defined in gitignore spec (#โ€‹57)
    • PATCH invalid trailing backslash will not throw unexpectedly

    An upgrade is recommended for all dependents


    The following rules could be not properly parsed with previous ignore versions

    **foo
    *bar
    qu*ux
    abc\   # `ignore` would throw if no whitespace after `\`
    

    v5.2.3

    Compare Source

    v5.2.2

    Compare Source


    Configuration

    ๐Ÿ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    ๐Ÿšฆ Automerge: Disabled by config. Please merge this manually once you are satisfied.

    โ™ป Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    ๐Ÿ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
  • fix: update dependency eslint to v8.30.0

    fix: update dependency eslint to v8.30.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint (source) | 8.29.0 -> 8.30.0 | age | adoption | passing | confidence |


    Release Notes

    eslint/eslint

    v8.30.0

    Compare Source

    Features

    Bug Fixes

    Documentation

    Chores


    Configuration

    ๐Ÿ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    ๐Ÿšฆ Automerge: Disabled by config. Please merge this manually once you are satisfied.

    โ™ป Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    ๐Ÿ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 2
  • ng add @angular-eslint/schematics adds incorrect version, throws error

    ng add @angular-eslint/schematics adds incorrect version, throws error

    This issue is for @angular-eslint/schematics, so I hope I'm putting this in the right place. Upon creating a new angular project, and then running the ng add schematic, it will install v1.0 and then throw an error. Upon opening the fresh project, when you run ng lint it prompts you to install ESLint. When you do, it installs v1.0 and then throws "NOT SUPPORTED: keyword "id", use "$id" for schema ID":

    % ng lint
    Cannot find "lint" target for the specified project.
    You can add a package that implements these capabilities.
    
    For example:
      ESLint: ng add @angular-eslint/schematics
    
    Would you like to add ESLint now? Yes
    โ„น Using package manager: npm
    โœ” Found compatible package version: @angular-eslint/[email protected].
    โœ” Package information loaded.
    
    The package @angular-eslint/[email protected] will be installed and executed.
    Would you like to proceed? Yes
    โœ” Packages successfully installed.
    NOT SUPPORTED: keyword "id", use "$id" for schema ID
    

    Note: You will get the same result of having v1.0 installed if you start by running the ng add command instead of letting the CLI prompt you to install ESLint.

    From here you have to run ng update @angular-eslint/schematics and it will update the package sequentially - v2, v3, v4, v12, v13, v14, and finally v15.

    At this point, you will just have the eslint schematics package installed, but it will not have added eslintrc or other dependencies. From the README, it says to run ng add @angular-eslint/schematic and "that's it", but alas I still had to run ng add @angular-eslint/schematics again to get the deps, and then ng g @angular-eslint/schematics:add-eslint-to-project to get the .eslintrc and angular.json changes.

    I would have expected a single ng add @angular-eslint/schematics to do all of this, based on the docs. But am still very grateful for all this package provides.

    Versions

    | package | 14 & 15| | ---------------------------------- | ------- | | @angular-eslint/builder | 15 & 15 | | ESLint | 8.28 | | node | 16.13.2 |

    # Please run `npx ng version` in your project and paste the full output here:
    
    Angular CLI: 15.0.4
    Node: 16.13.2
    Package Manager: npm 8.1.2
    OS: darwin arm64
    
    Angular: 15.0.4
    ... animations, cli, common, compiler, compiler-cli, core, forms
    ... platform-browser, platform-browser-dynamic, router
    
    Package                         Version
    ---------------------------------------------------------
    @angular-devkit/architect       0.1500.4
    @angular-devkit/build-angular   15.0.4
    @angular-devkit/core            15.0.4
    @angular-devkit/schematics      15.0.4
    @schematics/angular             15.0.4
    rxjs                            7.5.7
    typescript                      4.8.4
    
    • [x] I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.
    package: builder triage 
    opened by inorganik 1
  • fix(utils): use tsconfigRootDir as root dir when specified

    fix(utils): use tsconfigRootDir as root dir when specified

    Currently, when options.parserOptions.project is specified, we set the filename to be path.join(process.cwd(), 'tests/fixtures/'). This can be problematic when we run the test from a higher-up parent directory as it will use that as the base directory and look for 'tests/fixtures/file.ts from there.

    Instead, we should use options.parserOptions.tsconfigRootDir as the base directory when specified and resolve file.ts from there. This is similar to how @typescript-eslint does it: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/utils/src/eslint-utils/rule-tester/RuleTester.ts#L122-L137

    opened by nathan-xiao1 1
Releases(v15.1.0)
  • v15.1.0(Nov 24, 2022)

    15.1.0 (2022-11-24)

    Bug Fixes

    • eslint-plugin-template: [accessibility-valid-aria] use Number() to parse numeric values (#1218) (6fe40d6)
    • eslint-plugin-template: [i18n] allow more attributes by default (#1220) (4232b1c)
    • eslint-plugin: [no-input-rename] do not report on directive composition API (#1231) (119fba7)
    • update dependency @angular/compiler to v15.0.1 (#1223) (7b7bd76)
    • update typescript-eslint packages to v5.44.0 (#1222) (5750e3a)

    Features

    • eslint-plugin-template: [no-call-expression] add allowList option (#1217) (a69c809)
    Source code(tar.gz)
    Source code(zip)
  • v15.0.0(Nov 20, 2022)

    15.0.0 (2022-11-20)

    As always we recommend that you update your existing workspaces by using ng update as we provide some helpful schematics to help migrate your workspaces to the latest and greatest. Running the following will update Angular, the Angular CLI and angular-eslint together:

    ng update @angular/core @angular/cli @angular-eslint/schematics
    

    Bug Fixes

    • schematics: ensure scoped project names have correct eslint extends (7b3f736)

    Features

    • bump minimum supported eslint version to 7.20.0 (56ad69f), closes #662
    • eslint-plugin: remove no-conflicting-lifecycle from recommended config (19dd177), closes #502
    • fast linting by default, set eslint and typescript-eslint recommended (#1212) (1a53ef9), closes #1174
    • schematics: ng update migration to preserve v14 parserOptions.project for existing workspaces (1d45914)

    BREAKING CHANGES

    • Your installed version of ESLint must be version 7.20.0 or later (naturally we recommend the latest v8 of ESLint if possible)
    • eslint-plugin: no-conflicting-lifecycle is no longer included as part of the recommended config and if you wish to continue using it you will need to enable it yourself in your eslint config rules
    • New projects will not include parserOptions.project configuration in .eslintrc.json files by default, see the new guide here ./docs/RULES_REQUIRING_TYPE_INFORMATION.md
    Source code(tar.gz)
    Source code(zip)
  • v14.4.0(Nov 20, 2022)

  • v14.3.1(Nov 20, 2022)

  • v14.3.0(Nov 17, 2022)

  • v14.2.0(Nov 15, 2022)

    14.2.0 (2022-11-15)

    Bug Fixes

    • update dependency @angular/compiler to v14.2.10 (#1165) (bb4bfe5)
    • update dependency @angular/compiler to v14.2.3 (#1143) (4eb3e74)
    • update dependency aria-query to v5.1.3 (#1183) (7c5b299)
    • update dependency axobject-query to v3.1.1 (#1184) (dcfd43d)
    • update dependency eslint to v8.27.0 (#1189) (d2ae95a)
    • update dependency eslint-scope to v7 (#1156) (05bd9e6)
    • update typescript-eslint packages to v5.38.1 (#1152) (8f6d0ef)
    • update typescript-eslint packages to v5.43.0 (#1190) (2a4716a)

    Features

    • eslint-plugin-template: [accessibility-interactive-supports-focus] add rule (#1134) (d99d8c1)
    • eslint-plugin-template: [accessibility-role-has-required-aria] add rule (#1100) (f684df0)
    • eslint-plugin-template: [attributes-order] add rule with fixer (#1066) (4c789c7)
    • eslint-plugin-template: [no-duplicate-attributes] Add option to ignore properties (#1104) (018d390)
    • update dependency eslint to v8.24.0 (#1148) (5f30b2d)
    • update typescript-eslint packages to v5.38.0 (#1140) (85b4b47)
    Source code(tar.gz)
    Source code(zip)
  • v14.1.2(Sep 21, 2022)

  • v14.1.1(Sep 18, 2022)

  • v14.1.0(Sep 18, 2022)

  • v14.0.4(Sep 8, 2022)

  • v14.0.3(Aug 23, 2022)

  • v14.0.2(Jul 9, 2022)

  • v14.0.1(Jul 8, 2022)

  • v14.0.0(Jun 23, 2022)

    14.0.0 (2022-06-23)

    As always we recommend that you update your existing workspaces by using ng update as we provide some helpful schematics to help migrate your workspaces to the latest and greatest. Running the following will update Angular, the Angular CLI and angular-eslint together:

    ng update @angular/core @angular/cli @angular-eslint/schematics
    

    BREAKING CHANGES

    This is a major version bump and comes with some breaking changes, one of which might possibly impact your ESLint configuration if you are targeting inline HTML templates with a very specific glob pattern because the virtual filename has changed (read on to learn more).

    • update Angular to v14

      • All packages now require the use of Angular CLI >= 14.0.0 < 15.0.0
    • dropped support for Node 12 (in alignment with Angular's own version policy)

    • extracted inline HTML templates now contain the original Component filename in their processed virtual filename

      • When ESLint runs on your Component files, if you are using the recommended configuration, it will invoke a processor we have set up to extract the inline HTML templates from your Component declarations. Behind the scenes we give these extracted templates virtual filenames ending in .html so that rules targeting HTML files can also target your inline templates.
      • Before: In v13 the filename looked like this: inline-template-${++i}.component.html, where i was an incrementing integer (in case for example you had multiple Component declarations in the same .ts file.
      • Now: In v14 the filename now looks like this inline-template-${baseFilename}-${++i}.component.html, where i has the same incrementing integer behavior as before, but we now include the base filename within the virtual filename.
        • E.g. if you have a test file in projects/foo/src/app/app.spec.ts which declares a Component with an inline template, the virtual filename generated behind the scene for that template will be inline-template-app.spec.ts-1.component.html.
        • This new behavior allows you to use ESLint overrides to apply different behavior to Component inline templates in different files.

    Features

    • update eslint to ^8.18.0 (automatically migrated via ng update)
    • update typescript-eslint to ^5.29.0 (automatically migrated via ng update)
    • update deprecated cli.defaultCollection usage in angular.json to use cli.schematicCollections instead (automatically migrated via ng update)
    Source code(tar.gz)
    Source code(zip)
  • v13.5.0(Jun 12, 2022)

  • v13.4.0(Jun 11, 2022)

  • v13.3.0(Jun 10, 2022)

  • v13.2.1(Apr 14, 2022)

  • v13.2.0(Apr 14, 2022)

  • v13.1.0(Feb 13, 2022)

  • v13.0.1(Nov 19, 2021)

  • v13.0.0(Nov 18, 2021)

    13.0.0 (2021-11-18)

    Whilst this is a major release of the packages, in this case the major version change is primarily there to signify alignment with v13 of Angular.

    You should look to migrate to v13 of all Angular packages, as well as v8 of eslint and v5 of typescript-eslint.

    All of this will be handled for you automatically if you leverage the ng update schematics provided by @angular-eslint. You can simply include @angular-eslint/schematics in your ng update command alongside @angular/cli and @angular/core, for example:

    npx ng update @angular/cli @angular/core @angular-eslint/schematics
    
    Source code(tar.gz)
    Source code(zip)
  • v12.7.0(Nov 18, 2021)

  • v12.6.1(Oct 26, 2021)

  • v12.6.0(Oct 25, 2021)

    12.6.0 (2021-10-25)

    Bug Fixes

    • eslint-plugin: [sort-ngmodule-metadata-arrays] remove the property restriction (#694) (440f6dc)
    • eslint-plugin: [sort-ngmodule-metadata-arrays] report the correct node (#693) (886db08)
    • eslint-plugin: more appropriate language for no-attribute-decorator (#696) (4dde82c)
    • eslint-plugin-template: [i18n] ignore empty strings and non-texts within BoundText by default (#683) (4075643)

    Features

    • bundled-angular-compiler: create own bundle for @angular/compiler (#720) (0c42299)
    Source code(tar.gz)
    Source code(zip)
  • v12.5.0(Sep 20, 2021)

  • v12.4.1(Sep 9, 2021)

  • v12.4.0(Sep 9, 2021)

    12.4.0 (2021-09-09)

    Bug Fixes

    • eslint-plugin: [no-empty-lifecycle-method] incorrect suggestions and correct reports (#606) (a446e8f)
    • eslint-plugin: [sort-ngmodule-metadata-arrays] handle literal metadata and computed properties (#667) (f993069)
    • eslint-plugin: properly handle computed literals for some rules (#600) (fbd6ff7)
    • eslint-plugin-template: [i18n] fixes some incorrect reports (#665) (a011b9d)
    • eslint-plugin-template: [no-call-expression]: FunctionCalls not being reported (#601) (5552b13)
    • eslint-plugin-template: include more checks for isHiddenFromScreenReader (#545) (db2bc05)

    Features

    • eslint-plugin: [prefer-on-push-component-change-detection] add suggestion (#666) (3723c4c)
    • eslint-plugin: [use-injectable-provided-in] add suggestion (#594) (bdef8c7)
    • utils: make package public (#673) (0386082)
    Source code(tar.gz)
    Source code(zip)
  • v12.3.1(Jul 15, 2021)

  • v12.3.0(Jul 13, 2021)

    12.3.0 (2021-07-13)

    Bug Fixes

    • eslint-plugin: [no-input-prefix] handle alias and inputs metadata property (#582) (675ee11)
    • eslint-plugin: [no-input-rename] handle alias and inputs metadata property (#583) (2883e18)
    • eslint-plugin: [use-component-view-encapsulation] handle literal encapsulation properly (#586) (3a9b7f4)
    • eslint-plugin: [use-pipe-transform-interface] handle type imports properly in fix (#592) (ac3fb12)

    Features

    • builder: add noEslintrc option (#588) (4b150bf)
    • builder: add resolvePluginsRelativeTo option (#590) (3bea308)
    • builder: add rulesdir option (#589) (ff9557d)
    • builder: added outputFile option (#587) (420734b)
    • eslint-plugin: [component-selector] handle shadow dom components properly (#559) (ecbe684)
    • eslint-plugin: [no-pipe-impure] add suggestion (#585) (149bf2f)
    • schematics: better support @angular/cli 12.1 (#591) (c5da07b)
    Source code(tar.gz)
    Source code(zip)
Owner
angular-eslint
angular-eslint
Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Rainer Hahnekamp 7 Nov 16, 2022
Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Getting Started Clarity Angular is published as two npm packages: Contains the static styles for building HTML components. Contains the Angular compon

VMware Clarity 145 Dec 29, 2022
An example application that uses file-based routing with Angular, Analog, Vite with the Angular Router

Angular, Vite, and File-based routes This is an example application that uses Angular, Analog, and Vite for file-based routing. Routes are places in t

Brandon 9 Sep 25, 2022
Food Card website using angular Feature: add to cart remove to cart searching food filter food

SearchBar This project was generated with Angular CLI version 13.1.2. Development server Run ng serve for a dev server. Navigate to http://localhost:4

Gaurav Gupta 1 Jan 20, 2022
A tower defense game using Angular 13 + Phaser 3

PortalsTd This project was generated with Angular CLI version 13.1.3. Development server Run ng serve for a dev server. Navigate to http://localhost:4

null 5 Aug 11, 2022
Optimistic state updates using @nrwl/angular#optimisticUpdate

NxOptimisticState Quickstart: $ npm ci $ npx nx serve ou-ui This simple project was created as a PoC to show comparison of two different approaches to

Marek Pakes 4 Sep 30, 2022
Reactive Extensions for Angular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.

RxAngular 1.5k Jan 5, 2023
Semantic UI Angular Integrations

Semantic-UI-Angular Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in

Semantic Org 561 Dec 28, 2022
The code for a set of Angular 6+ components for the PatternFly project.

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.

PatternFly 87 Nov 15, 2022
Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 Angular Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBAngular 5 Demo 500+ material UI components Super s

MDBootstrap 1.1k Dec 30, 2022
Component infrastructure and Material Design components for Angular

Official components for Angular The Angular team builds and maintains both common UI components and tools to help you build your own custom components

Angular 23.2k Jan 3, 2023
Angular UI Component Library based on Ant Design

NG-ZORRO An enterprise-class Angular UI component library based on Ant Design. English | ็ฎ€ไฝ“ไธญๆ–‡ โœจ Features An enterprise-class UI design system for Angu

NG-ZORRO 8.3k Jan 6, 2023
Angular 2 building blocks :package: based on Semantic UI

Angular2 & Semantic UI Angular2 - Semantic UI Live demo ng-semantic.herokuapp.com Angular 2 Semantic UI version: 2.2.2 Installation npm install ng-sem

Vlado Tesanovic 995 Dec 23, 2022
Native Angular components & directives for Lightning Design System

ng-lightning This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS f

null 910 Dec 8, 2022
Native AngularJS (Angular) directives for Bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

AngularUI 14.4k Jan 3, 2023
NG Bootstrap - Angular powered Bootstrap widgets

NG Bootstrap - Angular powered Bootstrap widgets Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angula

ng-bootstrap 8k Dec 24, 2022
๐Ÿš€ Style and Component Library for Angular

ngx-ui Component & Style Library for Angular by Swimlane. Installing npm i @swimlane/ngx-ui --S Install the project's peer depencencies (moment, codem

Swimlane 654 Dec 24, 2022
Lightweight, Material Design inspired go to top button. No dependencies. Pure Angular!

Angular ScrollTop Button Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular! โœ“ Angular 13, Ivy

BART! 19 Dec 18, 2022
The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

ngx-bootstrap The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular Links Documentation Release Notes Slack

Valor Software 5.4k Jan 8, 2023