2015-01-26 70 views
13

Próbuję napisać głównie prawidłowy poliglot (X) HTML 5 w moich szablonach kątowych HTML. Wyglądają mniej więcej tak:Jak sprawdzać szablony kątowe HTML

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

Czasami zapominam o prawidłowym zamykaniu tagu, który przerywa niektóre przeglądarki. Chciałbym włączyć walidator do mojego toolchaina.

Problem polega na tym, że nie znam weryfikatora, który mógłby obsłużyć tę sprawę. Walidatory XML zwykle wymagają DTD, weryfikatory HTML będą narzekać na dyrektywy kątowe, które są używane w kodzie.

Może poprawne walidacja jest złym słowem i naprawdę chcę linter. Jedyne, co naprawdę chcę, to sprawdzić, czy każdy tag otwierający ma pasujący tag zamykający. Cała reszta to bonus.

Czy znasz takiego weryfikatora?

UWAGA: Zajmuję się głównie wyszukiwaniem narzędzia wiersza poleceń, które mogę zintegrować z moimi automatycznymi testami. Ale usługa sieciowa też może być pomocna.

+1

Używam [htmlhint] (http://htmlhint.com/) (przez [Grunt] (https://github.com/yaniswang/grunt-htmlhint) - ale to nie ma znaczenia, istnieje również CLI). Używam tylko 'tag-pair' (upewnij się, że tagi są zamknięte) i' attr-no-duplikacja' opcji. –

+1

Działa świetnie! Chciałbym, oprócz tego, jako odpowiedź, jeśli ją stworzysz. – tobib

+0

pokrewne: [Narzędzie do sprawdzania wieloznaczników] (http: // stackoverflow.com/q/16281471/588079) i [Validator dla polyglot HTML5] (http://softwarerecs.stackexchange.com/questions/17108/validator-for-polyglot-html5) – GitaarLAB

Odpowiedz

7

Od htmlhint jest opcją, można go używać w sposób opisany here z linii poleceń (oczywiście trzeba będzie npm install go pierwszy i upewnij się, że PATH zawiera node_modules/.bin):

htmlhint test.html 

celu zbadania specyficznych Opcje:

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

Lub jeśli opcje są w pliku konfiguracyjnym:

htmlhint -c config-file test.html 

I korzystać z następujących opcji z kątowa:

  • tag-pair: upewnij się, że tagi są prawidłowo zamknięte
  • attr-no-duplication: brak duplikat atrybuty w elemencie
+0

w jaki sposób "htmllint" ignoruje niestandardowe dyrektywy i atrybuty? – jrharshath

+0

Nie dba o niestandardowe atrybuty/elementy, przynajmniej w walidatorze online na swojej [stronie głównej] (http://htmlhint.com/). –

+0

prawda, zauważyłem to samo później – jrharshath

0

Projekt html-angular-validate to co używam i myślę, że jest to idealne. Używa walidator W3C HTML, i to w zasadzie tylko ignoruje błędy około wiedzieć kątową rzeczy (jak właściwości, które zaczynają się ng-* które są zwykle nieprawidłowy HTML)

go uruchomić poprzez haustem użyciu gulp-html-angular-validate

Trzeba będzie skonfiguruj go tak, aby wiedział o twoich niestandardowych elementach i dyrektywach atrybutów, które mogą stać się odrobiną ain, jeśli zawsze dodajesz nowe ... Jeśli raz to zrobisz, to działa całkiem dobrze i uratowało mój zespół wiele razy, znajdując proste literówki i typowe błędy!