HTMLの簡単な文法チェックには長らくValidator.nuのAPIを利用していたけど、Node.jsパッケージのHTMLHintがそこそこ使えそうだったので今はこっちを使っている。ローカルで動くと気軽に使える度が増す。ただデフォルトでインストールされるCLIプログラムはリッチな感じの出力にしか対応していないので、ちょっと扱いづらい。Vimのデフォルトのerrorformatに応じた形でチェック結果を出力するだけのNode.jsスクリプトを書いて使ってる。

Download: htmlhint and htmlhint.vim

あらかじめグローバルにHTMLHintをインストールしておく必要がある。htmlhintをパスの通った場所に、htmlhint.vimを~/.vim/compilerディレクトリにコピーし、~/.vim/vimrcなどで以下の様に設定してやるとインストール完了。

autocmd HTMLHint
  autocmd!

  autocmd FileType html compiler htmlhint
  autocmd FileType html autocmd! BufWritePost <buffer> silent make
autocmd END

これで保存するたびにHTMLHintが走ってくれる。もちろん手動でmakeしても良い。

---

HTMLHintはそれ(Node.js)なりに高速な動作とJSHintライクなゆるいチェックのお陰で、利用によるストレスは少ない。要素名や属性名が小文字になっているかどうかや二重引用符だけを使っているかどうかなどというValidator.nuでは警告されないものや、idがユニークであるかのチェックといった一歩踏み込んだものまで、なかなか良いチェック・ルールが揃っている。今はもうないけどHTML Lintという名前でウェブサービスとして公開されていた奴に似てる。

上記Node.jsスクリプトでは、チェックするルールは僕の好みで以下のように設定してある。

var ruleset = {
  'tagname-lowercase': true,
  'attr-lowercase': true,
  'attr-value-double-quotes': true,
  'attr-no-duplication': true,
  'doctype-first': true,
  'tag-pair': true,
  'tag-self-close': false,
  'spec-char-escape': true,
  'id-unique': true,
  'src-not-empty': true,
  'head-script-disabled': false,
  'img-alt-require': false,
  'doctype-html5': true,
  'id-class-value': false,
  'style-disabled': true,
  'space-tab-mixed-disabled': false,
  'id-class-ad-disabled': false,
  'href-abs-or-rel': false,
  'attr-unsafe-chars': false,
  'csslint': false,
  'jshint': false
};

書き方の都合上、空要素のスラッシュの省略(書かない)やimg要素のalt属性の省略(書かなくて良い時もある)を許可したりしてる。半角空白とタブの混在を許可してるのはpre要素で稀に混ざることがあることへの対策で、href属性はData URIを使うこともあるのでチェックしないようにした。他は必要なさそうというものだけを無効にしてる。

Gruntプラグインもあるので、CSS LintやJSHintと同じように開発フローに組み込むのも手軽で良い。とにかくカジュアルに使えてかつ最低限のHTMLクオリティを保証できそうなツールなので、積極的に使うとみんな幸せになれそう。