kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

HTML の Lint ツール「htmllint」を CircleCI で実行する

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

github.com

htmllint と htmllint-cli

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

github.com

以下のように 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 タグを下記忘れていると検出される
    • カスタマイズする場合は .htmllintrchead-req-title の設定を変更する
  • indenting spaces must be used in groups of 4
    • 4 スペース以外のインデントがあると検出される
    • カスタマイズする場合は .htmllintrcindent-width の設定を変更する
  • id value must match the format: underscore
    • id 名にハイフンがあると検出される
    • カスタマイズする場合は .htmllintrcid-class-style の設定を変更する
  • class value must match the format: underscore
    • class 名にハイフンがあると検出される
    • カスタマイズする場合は .htmllintrcid-class-style の設定を変更する
  • the id attribute is not double quoted
    • id 名にクォートを忘れていると検出される
    • カスタマイズする場合は .htmllintrcattr-quote-style の設定を変更する
  • the class attribute is not double quoted
    • class 名にクォートを忘れていると検出される
    • カスタマイズする場合は .htmllintrcattr-quote-style の設定を変更する
  • the id "wrapper" is already in use
    • id 名が重複していると検出される
    • カスタマイズする場合は .htmllintrcid-no-dup の設定を変更する

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

github.com

Dockerized

次に HTML を GitHub に push したら自動的に CI で htmllint を実行するため,事前準備として htmllint を Dockerized した.Docker Hub から 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

試しにサンプル HTML を push すると,期待通りにエラーになった.

f:id:kakku22:20181130104707p:plain

まとめ

  • 「htmllint」を使うと HTML に Lint を実行できる
    • CLI で実行する場合は「htmllint-cli」を使う
  • CircleCI で htmllint を実行するために Dockerized した
  • HTML も CI しよう!