search
LoginSignup
34

More than 5 years have passed since last update.

posted at

SublimeText3でHTML5の構文チェック

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
34