Microsoft VS Code and Angular 2 tags in HTML linter

Question

1.34M viewsSeptember 16, 2022angularjs html javascript visual-studio-code

2

Steve September 12, 2022 0 Comments

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.

2 Answers

score 0 · Answer 1 · 2022-09-13T11:48:10+00:00

Just add this fragment into you settings file (.vscodesettings.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.

score 1 · Answer 2 · 2022-09-13T10:29:23+00:00

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.