クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > 開発環境 > 【HTML】HTMLHintで構文チェックを事始める

【HTML】HTMLHintで構文チェックを事始める

開発環境 HTML HTMLHint デバッグ

構文チェック系の続きです。前回はStyleLintを使ってCSSの構文チェックを行いました。今回はHTMLHintを使ってHTMLの構文チェックをしてみたく。それでは行きましょう！

【目次】

※参考：【CSS】StyleLintで構文チェックを事始める - クモのようにコツコツと

Web開発環境まとめ
qiita.com

HTMLの構文チェックはLintよりHint？

「ESLint」「StyleLint」ときたら次はいよいよ「htmllint」*1！そう思っていた時代もありました…。

調べてみるとHTMLの構文チェックはどうもhtmllintより「HTMLHint」の方が定番のようだった。

Hintってヒントを出すという意味なのかな？JSHintというツールもあったのでこのジャンルでは普通なネーミングと思われる。

Googleトレンド

Googleトレンドを見るとだいたい拮抗。「全ての国」で見ると平均ではHTMHintが32に対しhtlmlintは30（母数が少なすぎるw）

※参考：https://trends.google.co.jp/trends/explore?q=htmllint,htmlhint

GitHubスター数

GitHubのスター数を見るとHTMLHintが2,300に対してhtmllintは344。こちらの差は桁違い！（2020/02/06現在）

※参考：GitHub - htmlhint/HTMLHint: ⚙️ The static code analysis tool you need for your HTML

※参考：GitHub - htmllint/htmllint: Unofficial html5 linter and validator.

npm週間ダウンロード数

npmの週間ダウンロードを見るとHTMLHintが42,509に対してhtmllintは29,585。やはりHTMLHintの方が多め。（2020/02/06現在）

※参考：htmlhint - npm

※参考：htmllint - npm

VSCode拡張機能

テキストエディタVSCodeの拡張機能（エクステンション）にもこの2つは付いている。そのダウンロード数を見るとHTMLHintが416,161に対してhtmlは3,684だった。こちらも桁が違う。（2020/02/06現在）

f:id:idr_zz:20200206043936j:plain

f:id:idr_zz:20200206043940j:plain

全体的にHTMLHintが高い

まとめるとこんな感じ。（2020/02/06現在）
全体的にHTMLHintが高めですな！

- HTMLHint htmllint
Googleトレンド 32 30
GitHub 2,300 344
npm 42,509 29,585
VSCode 416,161 3,684

ということでHTMLHinの方を事始めてみる。迷わず行けよ！行けばわかるさ！

HTMLHintのインストール

これまでの他のツールと同じ流れでできると予想してやってみる。

まず、Node.jsとnpmは既に入っている前提（ターミナルで下記を叩くとバージョン番号が出る）

node -v
npm -v

HTMLHintを入れるフォルダを作る。今回は「htmlhint_test」とした。

cdコマンドでhtmllint_testフォルダに移動。

cd （フォルダのパス）/htmlhint_test

package.jsonの作成

npm init -y

ローカルにHTMLLintをインストールする。

npm i -D htmlhint

package.jsonにHTMLHintが記述された！

  "devDependencies": {
    "htmlhint": "^0.11.0"
  }

ESLintやStyleLintはこのあと設定ファイルを読み込んだりしたのだが、HTMLHintは標準設定のままであればこの時点でもう構文チェックができるっぽい！

※参考：lint, prettier導入編（mac） - Qiita

HTMLファイルを作る

それではテスト用にHTMLファイルを作る。ファイル名は「test.html」とした。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>えいちてぃーえむえる・ひんと</title>
</head>
<body>
    <secton>
        <h1>えいちてぃーえむえる・ひんと</h1>
        <p>一人でできるかな。</p>
        <table>
            <th>
                <td>名前</td>
                <td>年齢</td>
                <td>尾行</td>
            </th>
            <tr>
                <td>ヤマダ タロウ</td>
                <td>53</td>
                <td>ヤマダ家の長男
            </tr>
            <tr>
                <td>ヤマダ ジロウ</td>
                <td>51</td>
                <td>ヤマダ家の次男</td></td>
            </tr>
            <tr>
                <td>ヤマダ サブロウ</td>
                <td>47</td>
                <td>ヤマダ家の三男</tr>
            </td>
        </table>
    </secton>
</body>
</html>

いくつか仕掛けを書いた。

  • sectionタグをsectonと打ってみた。
  • テーブルの2行目（ヤマダ タロウ）に閉じタグの抜け
  • テーブルの3行目（ヤマダ ジロウ）に閉じタグの重複
  • テーブルの4行目（ヤマダ サブロウ）にタグの入れ子ズレ

さあどうなるか。

構文チェックを実行

構文チェック実行はこれまでと同じ書き方。

npx htmlhint パス/ファイル名

ローカルにインストールしているので頭にnpxをつける。

※参考：知らないのは損！npmに同梱されているnpxがすごい便利なコマンドだった | Developers.IO

今回はフォルダ直下に「test.html」なのでこうなる。

npx htmlhint test.html

実行！

結果、なんか真っ赤な指摘キターーーーーー！！！ f:id:idr_zz:20200206051458j:plain 赤ペン先生気合入りすぎでは？w

指摘内容の確認

では、指摘内容をよく見ていこう。

L21 | </tr>
         ^ Tag must be paired, missing: [ </td> ], start tag match failed [ <td> ] on line 20. (tag-pair)

L25 | <td>ヤマダ家の次男</td></td>
          ^ Tag must be paired, no start tag: [ </td> ] (tag-pair)

L30 | <td>ヤマダ家の三男</tr>
          ^ Tag must be paired, missing: [ </td> ], start tag match failed [ <td> ] on line 30. (tag-pair)

L31 | </td>
          ^ Tag must be paired, no start tag: [ </td> ] (tag-pair)

Scanned 1 files, found 4 errors in 1 files (28 ms)

Google先生で訳して見ると…

L21 | </ tr>
　　　　^タグはペアになっている必要があります：[</ td>]、開始タグの一致に失敗しました[<td>]行20。（タグペア）

L25 | <td>ヤマダ家の次男</ td> </ td>
              ^タグはペアにする必要があります。開始タグはありません：[</ td>]（タグペア）

L30 | <td>ヤマダ家の三男</ tr>               ^タグはペアになっている必要があります：[</ td>]、30行目の開始タグの一致に失敗しました[<td>]（tag-pair）

L31 | </ td>
　　　　^タグはペアにする必要があります。開始タグはありません：[</ td>]（タグペア）

1つのファイルをスキャンし、1つのファイルで4つのエラーを検出しました（28 ms）

ふむ、ヤマダ三兄弟に仕掛けたタグについては全部指摘されたな。L21とかは21行目などの意味だろうな。

sectionタグをsectonと打った件についてはスルーか。独自のコンポーネント名もあり得るからだろうか。

修正、再実行

指摘された内容を修正した。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>えいちてぃーえむえる・ひんと</title>
</head>
<body>
    <secton>
        <h1>えいちてぃーえむえる・ひんと</h1>
        <p>一人でできるかな。</p>
        <table>
            <th>
                <td>名前</td>
                <td>年齢</td>
                <td>尾行</td>
            </th>
            <tr>
                <td>ヤマダ タロウ</td>
                <td>53</td>
                <td>ヤマダ家の長男</td>
            </tr>
            <tr>
                <td>ヤマダ ジロウ</td>
                <td>51</td>
                <td>ヤマダ家の次男</td>
            </tr>
            <tr>
                <td>ヤマダ サブロウ</td>
                <td>47</td>
                <td>ヤマダ家の三男</td>
            </tr>
</table>
    </secton>
</body>
</html>

もういっちょ仕掛けを書いてみた。

  • tabeの閉じタグ/tableのインデントをなくしてみた。

構文チェック再実行！

npx htmlhint test.html

お、今度は緑色！ f:id:idr_zz:20200206053058j:plain

Scanned 1 files, no errors found (30 ms).

1ファイルをスキャンしましたが、エラーは見つかりませんでした（30ミリ秒）。

前回のStyleLintはエラーがなくなると何の表示もされなかった（「返事がない、ただのしかばねのようだ」状態）がHTMLHintはエラーがなくなったことが明示されるんだな。

あと、エラーが赤でエラーなしが緑ってテストツールのJestと同じだな、と感じた。

※参考：【JS】Jestでテストを事始める（TDD：テスト駆動開発） - クモのようにコツコツと

ちなみに仕掛けておいた/tableのインデントについては標準設定ではスルーされた。体裁についてはPrettierの担当範囲と考えていいのかもしれない。

HTMLHintのルール設定

HTMLHintのルールは細かく設定ができるようだ。

※参考：Usage · htmlhint/HTMLHint Wiki · GitHub

こんな感じの書き方。

{
   "hoge": true,
    "fuga": true,
    "piyo": true
}

設定するには.htmlhintrcファイルを作る必要がありそう。

About .htmlhintrc You can config the `.htmlhintrc' like this, and place the file in your project root folder:

「.htmlhintrcについて
`.htmlhintrc 'を次のように設定し、ファイルをプロジェクトのルートフォルダーに配置できます。」

最後に

ということで、構文チェック系のツールをESLint（JS）、StyleLint（CSS）、HTMLHint（HTML）と三つ体験しました。まずは手動チェックで実行したので、自動的な実行もやってみたいです。あとこの3つを同時に実行するとかPrettierなどの他のツールとの連携なども調べて行きたく思います。それではまた！

Web開発環境まとめ
qiita.com

*1:全部小文字が正式名称ぽい