Posted at

SublimeText3でHTML5の構文チェック

More than 5 years have passed since last update.

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

Mac - PATHの通し方 - Qiita


確認

以下のように表示されたら成功です。

$ 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


参考

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