HTML linter 中的 Microsoft VS Code 和 Angular 2 标签

Question

I just started using Angular 2 in VSCode. Using the Angular.io "Tour of Heroes" as an example, the built-in HTML linter does not recognize the Angular 2 directives in the HTML tags, such as *ng-if or (click) , as you can see in this screen shot:

Is there some setting or extension I am missing? This is valid HTML code in an Angular 2 app and I don't want a lot of errors for nothing -- but I want to use the linter in case I make actual errors elsewhere.

Answer 1

You can add exceptions to the list of attributes in the HTMLHint extension:

"htmlhint.options": {
    "attr-lowercase": ["*ngIf", "*ngFor"]
}

The attr-lowercase rule can be true, false or an array of attribute names to ignore.

Answer 2

Just add this fragment into you settings file (.vscode\\settings.json in workspace or edit via File>Preferences>Settings):

"htmlhint.options": {
    "tagname-lowercase": true,
    "attr-value-double-quotes": true,
    "attr-no-duplication": true,
    "tag-pair": true,
    "spec-char-escape": true,
    "id-unique": true,
    "src-not-empty": true,
    "title-require": true
}

With this, HTMLHint plugin will parse correctly Angular templates and stop throw warnings.