HTML5 を手元でチェック・整形する

html5-tidy が experimental とはいえ公開されていたので早速設定。

html5-tidy のインストール

最後の方にある Building the tidy command-line tool にしたがってコマンド叩くだけ。

git clone https://github.com/w3c/tidy-html5
make -C build/gmake/
make install -C build/gmake/

これで /usr/local/bin にインストールされる。
Vim からあらかじめアクセスできるようにパスを適宜通しておく。

Mac でパスの関係上、以前の /usr/bin/tidy がヒットしてしまう場合は /etc/paths を書き換えて /usr/local/bin を優先するといい。

Vim の設定

ftplugin でもろもろ設定する。
NeoBundle で利用できるようにパッケージングしてみた。

.vimrc に以下のように書いて :NeoBundleUpdate と打てば使えるようになる。

NeoBundle januswel/html5.vim

ごちゃごちゃやってるが、キモは以下の 4 点。

1. compiler の指定
2. execute 1,$!tidy
3. tidy に渡すオプションはコマンド埋め込みや変数として定義
4. SVG など外部モジュールとして定義されている要素を warning で済ませられるよう new-block-tags などを使う

簡単なのでチェックは compiler を使う。 :make するだけでチェック結果が QuickFix ウィンドウに出てくるので楽。
対して整形は buffer local なキーマップを定義。デフォルトは m にマップしている。

accessibility check は判断基準が古いみたいでちょっと今の時代にあってないのではずしてみた。

tidy は外部ファイルに渡すオプションを書いて指定することもできるんだけど、パスの設定だとかが面倒なのでスクリプト埋め込みに。
気に入らない場合は直で修正、で。