HTMLHint

 普段、HTML の文法チェックに、Another HTMLLINT5 を使っていましたが、ローカルにチェックできないかを調べてみました。もともとのhtmllint は HTML5 に対応していないので、十分チェックできません。HTMLHint というものがあるようなので、使ってみようと思います。

インストール

 以前使った puppeteer と同じ様に npm でローカルインストールして使ってみます。

 もし、入っていなければ、node と npm をインストールしてください。

$ node -v
v10.24.0
$ npm -v
5.8.0
$ mkdir htmlhint
$ cd htmlhint
$ npm install htmlhint
npm WARN npm npm does not support Node.js v10.24.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
npm WARN notice [SECURITY] glob-parent has the following vulnerability: 1 moderate. Go here for more details: https://www.npmjs.com/advisories?search=glob-parent&version=2.0.0 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN saveError ENOENT: no such file or directory, open '/home/pi/work/Web/htmlhint/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/pi/work/Web/htmlhint/package.json'
npm WARN htmlhint No description
npm WARN htmlhint No repository field.
npm WARN htmlhint No README data
npm WARN htmlhint No license field.

 警告が出ていますが、インストールはできたようです。

実行

 npx で実行できるようです。

$ npx htmlhint https://sirius10.net

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

 おお、サイトのトップページにはエラーがないようです。

 ローカルにある html ファイルもチェックできます。メッセージは英語ですが、HTML の文法を理解していればわかる内容です。手書きの HTML の文法チェックはこれでいいと思います。ただし、これだと HTMLHint のディレクトリに移動しないとチェックできません。ディレクトリ以外で実行しようとすると、npx が npm レジストリから環境を汚さない場所にダウンロードしてしまいます。

実行用の SHELL スクリプト

 何処で実行してもいいように実行用にSHELL スクリプトを作ります。/usr/local/bin あたりに置いておこうと思います。また、htmlhint を /opt にコピーします。

$ cd ..
$ sudo cp -r htmlhint /opt/.
$ sudo vi /usr/local/bin/htmlhint
#!/bin/bash

INSTALL_DIR=/opt/htmlhint

if [ -f "${PWD}/$1" ]; then
    file="${PWD}/$1"
else
    file="$1"
fi

cd ${INSTALL_DIR}
npx htmlhint "${file}"
$ sudo chmod +x /usr/loca/bin/htmlhint

 これで通常のコマンドのように実行できます。

$ htmlhint index.html

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

 同様なチェックツールに、StyleLint や ESLint があるようです。こちらも使って見たいと思います。

web サイト

Posted by sirius