Esslint configuration for Nx/Angular project (no-host-metadata-property)

user_2519476 0
Viewed 1715

I would like to turn the rule @angular-eslint/no-host-metadata-property into a warning instead of an error but I can't figure out how to configure it.

This is what the error message looks like:

Use @HostBinding or @HostListener rather than the host metadata property (https://angular.io/styleguide#style-06-03) @angular-eslint/no-host-metadata-property

This is what I have tried in the eslintrc.json file at the root level:

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
     {
      "files": ["*.ts"],
      "rules": {
       ....
       "@angular-eslint/no-host-metadata-property": "warn",
      }
     "plugins": ["@angular-eslint/eslint-plugin", "eslint-plugin-import", "@typescript-eslint"]
    }
}

This is for an Angular 12 project. I ran the nx migration command to convert linting rules from tslint to eslint. How can I override that rule?

nrwl-nx typescript-eslint angular eslint
2 Answers

Making changes on the root level is futile as your project's .eslintrc.json will overrides those changes due to @nrwl/nx/angular being set in the overrides section.

You will unfortunately have to set this is every project in the overrides section.

If you have multiple projects and/or multiple changes that need to be applied, you can extract it into eslint-custom-overrides.json file and use it as the last in the extends section:

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@nrwl/nx/angular",
        "plugin:@angular-eslint/template/process-inline-templates"
        "../../eslintrc-custom-overrides.json"
      ],
   },
   ...
  ],
  ...
}

Your eslintrc-custom-overrides.json would look like this:

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
         "@angular-eslint/no-host-metadata-property": "warn"
      }
    }
  ]
}

Check for more details on the NX Issue.

user_34462550

As I understand this, there's no direct way for Nx to allow this since there could be many angular projects, or react projects in typescript all in the same repository. The way I ended up converting those errors into warnings is by commenting out the plugin extensions in all the projects/libraries, and extending them at the workspace level. This allows for them to be overridden.

The eslintrc.json for all the angular applications and libraries (inside the libs folder) looks like this:

{
  "extends": ["../../../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      //"extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
      "parserOptions": {
        "project": ["libs/siem/custom-dashboard/data-access-custom-dashboard/tsconfig.*?.json"]
      },
      "rules": {
        "@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:@nrwl/nx/angular-template"],
      "rules": {}
    }
  ]
}

and then the eslintrc.json at the workspace level I have is something like:

{     .
      .
      .
      "files": ["*.ts"],
      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
      "rules": {
        //overrides go in here
       }
     "plugins": ["@angular-eslint/eslint-plugin", "eslint-plugin-import", "@typescript-eslint"]
},

This is the only solution I was able to come across so far. Once I fix all the places where there are errors I intend to remove the overrides and have everything as it was originally setup by default.

user_25194760
Related