HTMLHintとは
HTMLの構文チェックができるもの。
例えば以下のHTMLには問題があるのだが、何が問題かわかるだろうか。
https://iwb.jp/s/htmlhint-can-check-url-code-directly/
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="none">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello world!</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
答えはDoctypeが最初に記述されていない。
HTMLHintを使用するとDoctypeの記載漏れなどを検出できる。
$ htmlhint *.html
/Users/i/sample/index.html
L1 |
^ Doctype must be declared first. (doctype-first)
Scanned 1 files, found 1 errors in 1 files (15 ms)
HTMLHintは以下のコマンドでインストールできる。
npm install htmlhint -g
URLを直接指定してチェックも可能
HTMLHintはURLを直接指定してチェックすることも可能になっている。
例えばhtmlhintのあとに先程のURLを入れて実行すれば同様にHTMLHintで検出することができる。
$ htmlhint https://iwb.jp/s/htmlhint-can-check-url-code-directly/
L1 |
^ Doctype must be declared first. (doctype-first)
Scanned 1 files, found 1 errors in 1 files (15 ms)
ルールの設定方法
htmlhintはそのまま使用すると検出したくないものと引っかかるので.htmlhintrcファイルを作成して以下のようにルールを設定したものを読み込まないと使い勝手が悪い。
各ルールの詳細に関しては公式ドキュメントを参照。
https://htmlhint.com/docs/user-guide/list-rules
設定例
{
"doctype-first": true,
"doctype-html5": true,
"head-script-disabled": false,
"style-disabled": false,
"title-require": true,
"attr-lowercase": ["viewBox"],
"attr-no-duplication": true,
"attr-no-unnecessary-whitespace": true,
"attr-unsafe-chars": true,
"attr-value-double-quotes": true,
"attr-value-not-empty": false,
"alt-require": true,
"input-requires-label": true,
"tags-check": false,
"tag-pair": true,
"tag-self-close": false,
"tagname-lowercase": true,
"empty-tag-not-self-closed": true,
"src-not-empty": true,
"href-abs-or-rel": false,
"id-class-ad-disabled": false,
"id-class-value": true,
"id-unique": true,
"inline-script-disabled": false,
"inline-style-disabled": false,
"space-tab-mixed-disabled": true,
"spec-char-escape": true
}
設定したファイルはこのように読み込んで実行する。
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-can-check-url-code-directly/
