kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

htmllint で Inline Configurations を使って Lint ルールをカスタマイズする

最近も HTML を書く機会が多く,HTML を実装するときには「htmllint」と CircleCI を組み合わせて Lint を実行している.「htmllint」の紹介記事は前に書いてある.

kakakakakku.hatenablog.com

the i tag is banned

Font Awesome を使って <i class="far fa-smile-wink"></i> のように絵文字を HTML に追加したら,エラーになった.「htmllint」の Lint ルールの中に tag-bans がある.今回は Font Awesome を使いたく,i タグを tag-bans から除外する必要があった.

the i tag is banned

i タグ以外だと,b タグと style タグも同じ Lint ルールでエラーになる.

the b tag is banned
the style tag is banned

理由としては htmllint init コマンドで生成されるデフォルトの .htmllintrc だと,以下のように i タグは禁止されている.

{
    (中略)
    "tag-bans": [
        "style",
        "b",
        "i"
    ],
    (中略)
}

よって .htmllintrc を修正すれば,エラーを無くすことができる.

{
    (中略)
    "tag-bans": [
        "style",
        "b"
    ],
    (中略)
}

Inline Configurations

.htmllintrc 以外に Lint ルールをカスタマイズする方法があるのかを調べるために Wiki を読んだところ,.htmllintrc に設定をする「Global Options」だけでなく,HTML に直接アノテーションを書く「Inline Configurations」もサポートされていた.

「Inline Configurations」を使うと,HTML ごとに設定を変更できるため柔軟性がある.具体的には以下のように HTML のコメント形式でアノテーションを書くことで i タグのエラーを無くすことができる.

<!DOCTYPE html>
<!-- htmllint tag-bans="['style','b']" -->
<html>
  <head>

もし tag-bans の Lint ルールを全て無効化する場合は,以下のようにアノテーションを書くこともできる.

<!DOCTYPE html>
<!-- htmllint tag-bans="false" -->
<html>
  <head>

まとめ

  • 「htmllint」で Lint ルールをカスタマイズする方法は「Global Options」「Inline Configurations」がある
  • HTML に直接アノテーションを書く「Inline Configurations」を使うと,HTML ごとに設定を変更できるため柔軟性がある