SublimeText3でHTML5の構文チェックを行うためのプラグイン SublimeLinter-HTML-tidy のインストール方法について解説します。
なお以下はMacでの作業内容です。
前提として"tidy-html5"が必要
tidy-html5とは？
HTML Tidy は、妥当ではない HTML文書を修正しそのレイアウトと字下げスタイルを良く整えることを目的とする、コンピュータプログラムでありまたライブラリとして使うことができるソフトウェアである。
via HTML Tidy - Wikipedia
tidy-html5は、このHTML5版ですね。
W3C開発なので安心です。
w3c/tidy-html5
tidy-html5のインストール
brew等を使わず直接インストールする方法です。
git clone https://github.com/w3c/tidy-html5
cd tidy-html5
make -C build/gmake/
sudo make install -C build/gmake/
パスの優先度変更
tidyはMacだとデフォルトで入っているようなので、/usr/local/binを優先するよう設定を変更しておきます。
sudo vi /etc/paths
paths
/usr/local/bin
/usr/bin
/bin
/usr/sbin
/sbin
確認
以下のように表示されたら成功です。
$ tidy -v
HTML Tidy for HTML5 (experimental) for Mac OS X https://github.com/w3c/tidy-html5/tree/c63cc39
SublimeLinter-HTML-HTML-tidyのインストール
SublimeLinter/SublimeLinter-html-tidy
コマンドパレットからインストールして、SublimeText3を再起動します。
厳密なチェックでないことに注意
たとえばHTML5ではa要素にはインタラクティブ要素を含めることができないと規定されているので、
button要素を含めることはできませんが、以下の構文はエラーになりません。
HTML5
<a href='/'><button>ボタン</button></a>
厳密チェックにはW3CValidators
W3CValidatorsがSublimeText3で動かなかったので動くようにした - Qiita