概要
htmlでできるhtmlファイルのvalidatorをいろいろ探していたらhtmllintがよさそうだったのでその時のメモ
理由は下記
- validatorをカスタマイズできる
- gulpでタスクを自動処理できる
インストール
# 今回は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
# これでエラー出力される