概要

htmlでできるhtmlファイルのvalidatorをいろいろ探していたらhtmllintがよさそうだったのでその時のメモ

理由は下記

validatorをカスタマイズできる
gulpでタスクを自動処理できる

htmllint - github

htmllint - npm

インストール

# 今回はhtmllintのほかにcliとgulpようのパッケージをインストール
npm i -D htmllint gulp-htmllint htmllint-cli

# htmllint-cliをインストールするとhtmllintコマンドが使えるので設定ファイルを作成
npx htmllint init

# これで.htmllintrcファイルが作成される

オプションの翻訳

ここからが記事の本題。npx htmllint initで作成したオプションのメモ
デフォルトだと下記が記載されている
https://github.com/htmllint/htmllint/wiki/Options

{
    "plugins": [],  // npm modules to load

    "maxerr": false,
    "raw-ignore-regex": false,
    "attr-bans": [
        "align",
        "background",
        "bgcolor",
        "border",
        "frameborder",
        "longdesc",
        "marginwidth",
        "marginheight",
        "scrolling",
        "style",
        "width"
    ],
    "indent-delta": false,
    "indent-style": "nonmixed",
    "indent-width": 4,
    "indent-width-cont": false,
    "spec-char-escape": true,
    "text-ignore-regex": false,
    "tag-bans": [
        "style",
        "b",
        "i"
    ],
    "tag-close": true,
    "tag-name-lowercase": true,
    "tag-name-match": true,
    "tag-self-close": false,
    "doctype-first": false,
    "doctype-html5": false,
    "attr-name-style": "dash",
    "attr-name-ignore-regex": false,
    "attr-no-dup": true,
    "attr-no-unsafe-char": true,
    "attr-order": false,
    "attr-quote-style": "double",
    "attr-req-value": true,
    "attr-new-line": false,
    "attr-validate": true,
    "id-no-dup": true,
    "id-class-no-ad": true,
    "id-class-style": "underscore",
    "class-no-dup": true,
    "class-style": false,
    "id-class-ignore-regex": false,
    "img-req-alt": true,
    "img-req-src": true,
    "html-valid-content-model": true,
    "head-valid-content-model": true,
    "href-style": false,
    "link-req-noopener": true,
    "label-req-for": true,
    "line-end-style": "lf",
    "line-no-trailing-whitespace": true,
    "line-max-len": false,
    "line-max-len-ignore-regex": false,
    "head-req-title": true,
    "title-no-dup": true,
    "title-max-len": 60,
    "html-req-lang": false,
    "lang-style": "case",
    "fig-req-figcaption": false,
    "focusable-tabindex-style": false,
    "input-radio-req-name": true,
    "input-req-label": false,
    "table-req-caption": false,
    "table-req-header": false,
    "tag-req-attr": false
}

maxerr

エラーの数。デフォルトはfalse。

raw-ignore-regex

正規表現をどうするか。デフォルトはfalse。
設定されているとマッチしている正規表現は削除される

attr-bans

禁止する属性

indent-delta

インデントデルタの意味がよくわからず

indent-style

インデントのタイプ。

"tabs": タブ
"spaces": スペース
"nonmixed": 両方
false: No restriction.

indent-width

インデントのサイズ

indent-width-cont

spec-char-escape

特殊文字はエスケープするかどうか

text-ignore-regex

設定された正規表現に対しては置換する

tag-bans

設定されたタグを禁止する

tag-close

閉じタグをどうするか

tag-name-lowercase

タグ名を小文字で統一するか

tag-name-match

タグ名が一致しているかどうか

tag-self-close

Void要素(area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, and wbr)の閉じタグをどうするか

"always": 閉じタグを必須 (html4 とか xhtml)
"never": 閉じタグをしない / (html5 style).
false: 制限しない

doctype-first

!DOCTYPEの位置

true: 空白とコメントを除いて最初になければいけない
"smart": headタグがある場合、最初になければいけない
false: 制限しない

doctype-html5

!DOCTYPEをhtml5にするかどうか

attr-name-style

属性名のフォーマットをどうするか

attr-name-ignore-regex

正規表現で指定された属性名は、attr-name-styleから除外される

attr-no-dup

設定された場合、同じタグ内で属性が重複できない

attr-no-unsafe-char

設定すると安全でない文字列は属性値に設定できない

attr-order

設定すると属性は、設定した順序にしなければいけない

例えば下記のように1:id,2:classの順序に設定して

"attr-order": ["id", "class"]

<h1 class="testClass" id="testId">テストサイトタイトル</h1>

のファイルでvalidatorをすると下記のエラーが表示される

$ npx htmllint public/index.html
public/index.html: line 8, col 9, attribute id should come before class

[htmllint] found 1 errors out of 1 files

attr-quote-style

属性のquoteをどうするか

"double": "にしなくてはいけない
"single": 'にしなければならない
"quoted": quoteがなくてはいけない
false: 制限しない

attr-req-value

空の属性値を許可するか

attr-new-line

設定した行数以下に同じ属性を含めない

attr-validate

属性は整形式でなくてはいけない

id-no-dup

設定した場合、要素内で重複しない

id-class-no-ad

idとclassに "ad", "banner", "social"の文字を禁止する

id-class-style

idとclass名の値をどうするか

"lowercase": 小文字で統一
"underscore": 小文字と_で統一.
"dash": 小文字と-で統一
"camel": キャメルケース
"bem": block, element, modifier

class-no-dup

設定した場合、要素内でclass名を重複しない

class-style

class名のスタイルをどうするか。ここでclass名のスタイルを設定することでid-class-styleとは別の設定できる

"lowercase": 小文字で統一
"underscore": 小文字と_で統一.
"dash": 小文字と-で統一
"camel": キャメルケース
"bem": block, element, modifier

id-class-ignore-regex

正規表現で設定された、id,class名は除外される

img-req-alt

img要素のaltをどうするか

true: img要素がある場合、空ではないalt属性が必須
"allownull": img要素がある場合、alt属性が必須である。ただし空のalt(alt="")は許可
false: 制限しない

img-req-src

設定するとimg要素がある場合、src属性が必須

html-valid-content-model

設定した場合、content-model(head,bodyのみが許可される)が設定される。

head-valid-content-model

設定した場合、content-model(link, meta, noscript, script, style, template, and titleのみが許可される)が設定される

href-style

hrefのパスのスタイルを設定できる

"absolute": すべてのhrefを絶対パスで指定
"relative": すべてのhrefを相対パスで指定
false: 制限しない。リンクがフラグメント(#ではじまる)ものはチェックしない

link-req-noopener

設定されている場合、target="_ blank"のタグはそれぞれrel="noopener"またはrel="noreferrer"属性を持たなければなりません。
@Apprentice_engineer さんtarget="_blank"には気をつけよう
の記事のようにこれは設定したほうがよさそう

label-req-for

設定するとfor属性が必須になる

line-end-style

改行のコードの設定をどうするか

"lf": LFコード
"crlf": CRLFコード
"cr": CRコード
false: 制限しない

line-no-trailing-whitespace

設定されている場合、行は空白文字で終わるとエラー

line-max-len

設定されている場合、設定した文字数を超えるとエラー

line-max-len-ignore-regex

設定されている場合、設定した正規表現に一致する名前を持つ行は設定した文字数ルールでは無視されます。たとえば、長いhref属性を持つ行は、正規表現のhrefを使って除外できる

head-req-title

設定されている場合、headタグに空でないtitleタグを含める必要があります。

title-no-dup

設定されている場合、titleタグはheadタグに重複しない。

title-max-len

titleタグは文字数を超えた場合エラー

html-req-lang

設定されていると、各htmlタグにlang属性が必要になります。

lang-style

設定されているとlang属性は有効な形式（xx-YY、xxは有効な言語コード、YYは有効な国別コード）で設定する

fig-req-figcaption

設定されていると、figureタブはfigcaptionタグを含み、それぞれのfigcaptionタグの親はfigureタグでなければエラー。

focusable-tabindex-style

設定されていると、すべてのフォーカス可能な要素（a、area、button、input、img、select、textarea）は、tabindex属性がある場合、正の属性値を持たなければエラー。

input-radio-req-name

設定されていると、各ラジオタイプ入力は空でないname属性を設定しないとエラー

input-req-label

テキストまたはラジオ要素には、関連付けられたラベル要素を設定しないとエラー。

table-req-caption

設定されると、tableタグに少なくとも1つのcaptionタグが含まれていないとエラー。

table-req-header

設定されると、tableタグはheadを設定しないとエラー：theadタグまたはthタグを持つtrタグ。

tag-req-attr

設定されると、指定された属性は指定されたタグに設定しないとエラー。

    "tag-req-attr": {
      "role": ["nav"]
    }

こんな感じでmainタグにrole属性を必須化できる

<nav class="nav">

$ npx htmllint public/index.html
public/index.html: line 9, col 5, tag has missing or empty attributes
# これでエラー出力される