HTML を実装しながら Lint を実行するため「htmllint」を使うことにした．類似ライブラリに「HTMLHint」もある．

htmllint と htmllint-cli

「htmllint」を CLI で実行する場合は「htmllint-cli」を使う．

以下のように npm で htmllint-cli をインストールして，プロジェクトのルートディレクトリで htmllint init を実行すると，設定ファイルの .htmllintrc がデフォルトルールで自動生成される．Lint ルールをカスタマイズする場合は .htmllintrc を変更する．

$ npm install -g htmllint-cli

$ htmllint --version
0.0.7

$ htmllint init

$ htmllint sample.html

検証

検証用にサンプル HTML を実装しながら，適宜 htmllint を実行したところ，以下を確認できた．

the tag must contain a title
- head タグに title タグを下記忘れていると検出される
- カスタマイズする場合は .htmllintrc で head-req-title の設定を変更する
indenting spaces must be used in groups of 4
- 4 スペース以外のインデントがあると検出される
- カスタマイズする場合は .htmllintrc で indent-width の設定を変更する
id value must match the format: underscore
- id 名にハイフンがあると検出される
- カスタマイズする場合は .htmllintrc で id-class-style の設定を変更する
class value must match the format: underscore
- class 名にハイフンがあると検出される
- カスタマイズする場合は .htmllintrc で id-class-style の設定を変更する
the id attribute is not double quoted
- id 名にクォートを忘れていると検出される
- カスタマイズする場合は .htmllintrc で attr-quote-style の設定を変更する
the class attribute is not double quoted
- class 名にクォートを忘れていると検出される
- カスタマイズする場合は .htmllintrc で attr-quote-style の設定を変更する
the id "wrapper" is already in use
- id 名が重複していると検出される
- カスタマイズする場合は .htmllintrc で id-no-dup の設定を変更する

Lint として基本的なルールは揃っている．デフォルト OFF になっているルールも多く，全ルールを確認するには公式 Wiki を見る．

github.com

Dockerized

次に HTML を GitHub に push したら自動的に CI で htmllint を実行するため，事前準備として htmllint を Dockerized した．Docker Hub から kakakakakku/htmllint-cli イメージを落とせば使える．

https://hub.docker.com/r/kakakakakku/htmllint-cli/

$ docker pull kakakakakku/htmllint-cli
$ docker run kakakakakku/htmllint-cli --version
$ docker run -v ${PWD}:/assets kakakakakku/htmllint-cli --cwd /assets

CircleCI で htmllint を実行する

次は CircleCI で .circleci/config.yml を以下のように書く．

version: 2

jobs:
  htmllint:
    docker:
      - image: kakakakakku/htmllint-cli
    steps:
      - checkout
      - run: htmllint --cwd .

workflows:
  version: 2
  ci:
    jobs:
      - htmllint