Lifting for html works only with manual activation in the settings

[Drovosek01]

Hi guys.

I'm transferring an Angular project from tslint to eslint. I ran into a problem that eslint didn't highlight errors in Angular component templates, more precisely eslint didn't highlight errors in .html files, but it highlighted errors in all other file types (I looked at the files .ts and .js and .json) in VSCode

I fixed this issue by adding one line to settings.json:
"eslint.validate": ["html"],

eslint now highlights errors in .html files and in those files in which it highlighted errors before.

But why did it highlight errors in all files except .html before? And why with this setting it highlights errors not only in .html files? In my opinion, it will be clearer when the parameter " eslint.validate" is not set, then error highlighting works either in all files whose formats are supported by eslint, or error highlighting should not work anywhere at all.

That's how it was before I applied that setting to eslint:

This is how it became after I applied this setting to eslint:

This is the .eslintrc.json file that is located in the root of the project:

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": ["off", null]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    },
    {
      "files": ["*.ts"],
      "rules": {
        "@angular-eslint/no-output-native": "error",
        "@angular-eslint/component-class-suffix": "error",
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-class-suffix": "error",
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/no-host-metadata-property": "error",
        "@angular-eslint/no-input-rename": "error",
        "@angular-eslint/no-inputs-metadata-property": "error",
        "@angular-eslint/no-output-on-prefix": "error",
        "@angular-eslint/no-output-rename": "error",
        "@angular-eslint/no-outputs-metadata-property": "error",
        "@angular-eslint/use-lifecycle-interface": "error",
        "@angular-eslint/use-pipe-transform-interface": "error",
        "@typescript-eslint/consistent-type-definitions": "error",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "warn",
          {
            "overrides": {
              "constructors": "off"
            }
          }
        ],
        "@typescript-eslint/member-ordering": "error",
        "@typescript-eslint/naming-convention": "warn",
        "@typescript-eslint/no-empty-function": "error",
        "@typescript-eslint/no-empty-interface": "error",
        "@typescript-eslint/no-inferrable-types": [
          "error",
          {
            "ignoreParameters": true
          }
        ],
        "@typescript-eslint/no-misused-new": "error",
        "@typescript-eslint/no-non-null-assertion": "error",
        "@typescript-eslint/no-shadow": [
          "error",
          {
            "hoist": "all"
          }
        ],
        "@typescript-eslint/no-unused-expressions": ["error", { "allowTernary": true }],
        "@typescript-eslint/prefer-function-type": "error",
        "@typescript-eslint/quotes": ["error", "single"],
        "@typescript-eslint/unified-signatures": "error",
        "arrow-body-style": ["error", "as-needed"],
        "arrow-parens": ["error", "always"],
        "constructor-super": "error",
        "curly": "error",
        "eqeqeq": ["error", "smart"],
        "guard-for-in": "error",
        "id-blacklist": "off",
        "id-match": "off",
        "import/no-deprecated": "warn",
        "import/order": "error",
        "no-bitwise": "error",
        "no-caller": "error",
        "no-console": [
          "error",
          {
            "allow": [
              "log",
              "warn",
              "dir",
              "timeLog",
              "assert",
              "clear",
              "count",
              "countReset",
              "group",
              "groupEnd",
              "table",
              "dirxml",
              "error",
              "groupCollapsed",
              "Console",
              "profile",
              "profileEnd",
              "timeStamp",
              "context"
            ]
          }
        ],
        "no-debugger": "error",
        "no-empty": "error",
        "no-eval": "error",
        "no-fallthrough": "error",
        "no-new-wrappers": "error",
        "no-restricted-imports": ["error", "rxjs/Rx"],
        "no-throw-literal": "error",
        "no-undef-init": "error",
        "no-underscore-dangle": "off",
        "no-useless-constructor": "off",
        "no-var": "error",
        "prefer-const": "error",
        "radix": "error",
        "rxjs/no-internal": "error",
        "rxjs/no-subject-unsubscribe": "error",
        "rxjs/no-unsafe-takeuntil": [
          "error",
          {
            "allow": [
              "count",
              "defaultIfEmpty",
              "endWith",
              "every",
              "finalize",
              "finally",
              "isEmpty",
              "last",
              "max",
              "min",
              "publish",
              "publishBehavior",
              "publishLast",
              "publishReplay",
              "reduce",
              "share",
              "shareReplay",
              "skipLast",
              "takeLast",
              "throwIfEmpty",
              "toArray"
            ]
          }
        ]
      },
      "plugins": ["@angular-eslint/eslint-plugin", "eslint-plugin-import", "eslint-plugin-rxjs", "@typescript-eslint"]
    },
    {
      "files": ["*.html"],
      "rules": {}
    }
  ]
}

And this is the .eslintrc.json file, which is located in one of the project's applications and this file is closest to the. html file that I took a screenshot of.

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
      "parserOptions": {
        "project": ["apps/preliminary-record//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"
          }
        ]
      },
      "plugins": ["@angular-eslint/eslint-plugin", "@typescript-eslint"]
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@nrwl/nx/angular-template"],
      "rules": {}
    }
  ]
}

[dbaeumer]

eslint.validate is deprecated and you should use eslint.probe. Have you tried using that setting?

[lampe]

I have a problem that goes in the same direction.

My setup is the same also I'm using NX and also in Webstorm it works

[dbaeumer]

Can you please provide me with a GitHub repository I can clone that demos what you are experiencing.

[lampewebdev]

@dbaeumer I have create a repo here:
https://github.com/lampewebdev/eslinttest
and here is a commit with the changes from the default nx template:
lampewebdev/eslinttest@0cda30a

Images with no alt description should be an error but they are not.

Thanks for helping :)

[dbaeumer]

@lampewebdev just to check: does validation happen correctly in the terminal?

[dbaeumer]

And which file do I need to open to see the missing error?

[lampewebdev]

@dbaeumer
Here you can see the command I have run and the error I get and the file '/eslint-demo/apps/eslinttest/src/app/app.component.html'

➜ npx nx run eslinttest:lint

> nx run eslinttest:lint 

Linting "eslinttest"...

/Users/m02243/eslint-demo/apps/eslinttest/src/app/app.component.html
  3:3  error  <img/> element must have a text alternative  @angular-eslint/template/accessibility-alt-text

/Users/m02243/eslint-demo/apps/eslinttest/src/app/app.component.spec.ts
  1:10  warning  'Component' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (1 error, 1 warning)

[dbaeumer]

OK. As already noted a workaround is to add the probe list to the validate setting. This makes it work. I need to investigate why the probing alone doesn't work in this setup.

[lampewebdev]

@dbaeumer Maybe I miss understand but I have added the probe setting in the settings.json:

  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown"
  ],

And this does not fix it for me

[dbaeumer]

Found the problem