0
219
ViewsDisabling the squiggly green line in Angular 2+ html template
How can I get rid of the following squiggly green line while I am editing the html template of an Angular 2+ >= v2 (v2 or higher) project without changing the template itself: Lets say I have the following line:
<textarea [(ngModel)]="jobDescription" cols="40" rows="5" (ngModelChange)="textAreaEmpty()"></textarea>
<br/>
Above line inside Visual Studio Code (1.11.1) Editor looks like the following
Notice the green squiggly line? If I hover over it I see the following hint:
Suggesting : "The attribute name of [[(ngModel)]] must be in lowercase. I want to ignore this suggestion. How can I achieve this without turning off the entire editor suggestions?
I am happy with other potential editor suggestions but for this particular one I would like to turn this green alert off.
Update 1: my workspace settings looks like the following now
{
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/*.js.map": true,
"**/.DS_Store": true,
"**/*.js": { "when": "$(basename).ts"}
},
"window.zoomLevel": 0,
"html.suggest.angular1": false
}
Update 2: Even adding "html.suggest.angular1": false did not disable these warning and I still see them in my editor:
Note: I have the following Extensions installed:
- Angular TypeScript Snippets for VS Code
- angular2-inline
- Azure Functions Tools - Extensions for VS Code
- VS Code - Debugger for Chrome
- VS Code ESLint extension
- Git History (including git log)
- Visual Studio Code HTML Snippets
- vscode-htmlhint
- IntelliSense for CSS class names
- Latest TypeScript and Javascript Grammer
- Visual Studio Team Services Extension
- Visual Studio Team Services Status Extension for Visual Studio Code
Final Update:
In my case the HTMLHint was the culprit. I disabled the extension and reloaded the work space and now I do not see any more squiggly green line.
3 answers
Answer question0
Go to File -> Preferences -> Settings
Open up the html pane and check this line:
// Configures if the built-in HTML language support suggests Angular V1 tags and properties.
"html.suggest.angular1": true,
it should be false.
0
This is coming from TSLint/Codelyzer, which is specific to the project itself. Unfortunately, while TSLint supports rule flags in code to disable rules for specific lines, there is no support for this in HTML files. you could edit out this rule in the tsconfig.json, but a more elegant solution might be to go to File > Settings > Preferences, select the TSLint section, and add the glob *.html to `"tslint.exclude".
EDIT: Undeleted per @echonax 's request, but I deleted it in the first place because I think his answer is the correct one! I'll leave it here regardless.
0
I managed to get rid of the annotations by adding a .htmlhintrc file to the root path in my project and adding the following values:
{ "attr-lowercase": false, "doctype-first": false }