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

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 ごとに設定を変更できるため柔軟性がある

kakakakakku blog

Weekly Tech Blog: Keep on Learning!

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

the i tag is banned

Inline Configurations

まとめ