2015-01-26 2 views
13

Я пытаюсь писать в основном модные полиглот (X) HTML 5 в моих угловых HTML-шаблонах. Они выглядят примерно так:Как проверить угловые HTML-шаблоны

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

Иногда я забываю закрыть тег правильно, что ломает некоторые браузеры. Поэтому я хотел бы включить валидатор в свою инструментальную цепочку.

Проблема в следующем: я не знаю, какой валидатор может обрабатывать этот случай. Валидаторы XML обычно требуют DTD, HTML-валидаторы будут жаловаться на угловые директивы, которые используются в коде.

Возможно validator - неправильное слово, и я действительно хочу linter. Единственное, что я хочу сделать, это проверить, что каждый открывающий тег имеет соответствующий тег закрытия. Все остальное - бонус.

Знаете ли вы, что такой валидатор?

ПРИМЕЧАНИЕ:: В первую очередь я ищу инструмент командной строки, который я могу интегрировать с автоматическим тестированием. Но веб-сервис также может быть полезен.

+1

Я использую [htmlhint] (http://htmlhint.com/) (через [Grunt] (https://github.com/yaniswang/grunt-htmlhint)), но это не имеет никакого значения, есть также CLI). Я использую только тег-пар (убедитесь, что теги закрыты) и 'attr-no-duplication'. –

+1

Отлично работает! Я бы хотел, чтобы это было ответом, если вы его создадите. – tobib

+0

, связанный: [Validator] (http: // stackoverflow.com/q/16281471/588079) и [Validator for polyglot HTML5] (http://softwarerecs.stackexchange.com/questions/17108/validator-for-polyglot-html5) – GitaarLAB

ответ

7

Поскольку htmlhint вариант, вы можете использовать его, как описано here из командной строки (конечно, вы должны npm install его первым и убедитесь, что ваш PATH содержит node_modules/.bin):

htmlhint test.html 

Для проверки конкретных варианты:

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

Или, если параметры находятся в файле конфигурации:

htmlhint -c config-file test.html 

Я использую следующие варианты с Угловым:

  • tag-pair: убедитесь, что метки закрыты
  • attr-no-duplication: дубликат не атрибуты элемента
+0

как вы делаете 'htmllint' игнорировать пользовательские директивы и атрибуты? – jrharshath

+0

Он не заботится о пользовательских атрибутах/элементах, по крайней мере, в онлайн-валидаторе на своей [главной странице] (http://htmlhint.com/). –

+0

true, я заметил то же самое позже – jrharshath

0

Проект html-angular-validate является то, что я использую , и я думаю, что это идеально для этого. Он использует службу проверки W3C HTML и это в основном просто игнорирует ошибки о знать угловой материал (например, свойство, которые начинаются с ng-*, которые, как правило, недействительным HTML)

я запустить его с помощью глотка с помощью gulp-html-angular-validate

Вы должны сконфигурируйте его, чтобы узнать о своих настраиваемых элементах и ​​директивах атрибутов, которые могут стать немного ain, если вы всегда добавляете новые ... hoever, как только вы это сделали, это работает очень хорошо, и я много раз спасал свою команду, находя простые опечатки и распространенные ошибки!

Смежные вопросы