Wie validiere ich eckige HTML-Vorlagen?

Question

Ich versuche in meinen eckigen HTML-Templates meistens gültige polyglotte (X) HTML 5 zu schreiben. Sie sehen ungefähr so ​​aus:

<div class="some-class"> 
    <input type="checkbox" data-ng-model="variable" /> 
    <foo-directive data-ng-if="variable"></foo-directive> 
</div> 

Manchmal vergesse ich, ein Tag richtig zu schließen, das einige Browser bricht. Daher möchte ich einen Validator in meine Toolchain aufnehmen.

Das Problem ist: Ich kenne keinen Validator, der diesen Fall behandeln kann. XML-Validierer benötigen in der Regel eine DTD, HTML-Validierer beschweren sich über die im Code verwendeten Winkelanweisungen.

Vielleicht Validator ist das falsche Wort und ich möchte wirklich eine lin. Das einzige, was ich wirklich möchte, ist zu überprüfen, dass jedes öffnende Tag ein passendes schließendes Tag hat. Alles andere ist ein Bonus.

Kennen Sie einen solchen Validator?

HINWEIS: Ich suche in erster Linie nach einem Befehlszeilentool, das ich in meine automatisierten Tests integrieren kann. Aber auch ein Webservice kann hilfreich sein.

Answer 1

Da htmlhint ist eine Option, können Sie es wie beschrieben here von der Kommandozeile verwenden können (natürlich werden Sie es zu npm install haben zuerst und stellen Sie sicher, dass Ihre PATH enthält node_modules/.bin):

htmlhint test.html 

für spezifische Um zu testen, Optionen:

htmlhint -r tag-pair,attr-no-duplication test.html 

Oder wenn die Optionen sind in einer Konfigurationsdatei:

htmlhint -c config-file test.html 

ich die folgenden Optionen mit kantigem verwenden:

• tag-pair: stellen Sie sicher, Tags richtig
• attr-no-duplication geschlossen sind: keine doppelte Attribute in einem Element

Answer 2

Das html-angular-validate Projekt ist, was ich benutze und ich denke, es ist perfekt dafür. Es nutzt die W3C HTML Validation Service, und es ignoriert grundsätzlich nur Fehler über Winkel Sachen wissen (wie Eigenschaften, die mit ng-* beginnen, die normalerweise ungültige HTML) sind

ich es über schluck laufen gulp-html-angular-validate

mit Du musst konfiguriere es, um über deine benutzerdefinierten Element- und Attribut-Direktiven Bescheid zu wissen, was ein bisschen zu einem Ain werden kann, wenn du immer neue hinzufügst ... aber sobald du dies getan hast, funktioniert es ziemlich gut und hat mein Team viele Male durch das Finden gerettet einfache Tippfehler und häufige Fehler!