在 Intellij/Webstorm 中显示 es-lint html 错误

Question

我已经为我的 Angular 项目设置了 es-lint。一切正常，除了 Intellij/Webstorm IDE 中的 html 文件中的错误突出显示。我想在模板中使用方法时显示错误。

.eslintrc.json

{
    "root": true,
    "ignorePatterns": [
        "projects/**/*"
    ],
    "overrides": [
        {
            "files": [
                "*.html"
            ],
            "extends": [
                "plugin:@angular-eslint/template/recommended"
            ],
            "rules": {
                "@angular-eslint/template/no-call-expression": "error"
            }
        }
    ]
}

ng lint 输出

html 文件在 IDE

开发包

"devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5",
    "@angular-eslint/builder": "0.8.0-beta.7",
    "@angular-eslint/eslint-plugin": "0.8.0-beta.7",
    "@angular-eslint/eslint-plugin-template": "0.8.0-beta.7",
    "@angular-eslint/schematics": "^0.8.0-beta.7",
    "@angular-eslint/template-parser": "0.8.0-beta.7",
    "@angular/cli": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "codelyzer": "^6.0.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "2.2.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.0.2"
  }

如果我运行 ng lint，它会正确输出错误，但是，在我的 IDE 中，我看不到任何突出显示的问题。但是，如果我为 ts 文件设置规则，即使在 IDE 中它也能正确显示。我的 eslint 设置在 IDE:

内设置为自动

Answer 1

请尝试将 html 添加到 注册表 中的 eslint.additional.file.extensions 列表（帮助 > 查找操作... , 输入 registry... 找到它）并重新启动 IDE

在 Intellij/Webstorm 中显示 es-lint html 错误

Display es-lint html errors in Intellij/Webstorm

intellij-idea

eslint

angular