Help us understand the problem. What is going on with this article?

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

maccotsan
フリーランスのWEBエンジニアです。 カバーしているスキルはLAMP/JS/HTML5など あたらしもの好きなので日々勉強ですっ!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away