Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disabling 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

enter image description here

Notice the green squiggly line? If I hover over it I see the following hint:

enter image description here

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

enter image description here

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.

like image 623
MHOOS Avatar asked Apr 13 '17 16:04

MHOOS


3 Answers

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.

like image 131
eko Avatar answered Nov 19 '22 12:11

eko


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.

like image 23
joh04667 Avatar answered Nov 19 '22 12:11

joh04667


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 }

like image 2
MHC2000 Avatar answered Nov 19 '22 12:11

MHC2000