htmllintのオプション

# 概要

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

理由は下記

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

[htmllint - github](https://github.com/htmllint/htmllint)

[htmllint - npm](https://www.npmjs.com/package/htmllint)

## インストール

```bash
# 今回は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

```json
{
    "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の順序に設定して

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

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

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

```bash
$ 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"には気をつけよう
](https://qiita.com/Apprentice_engineer/items/5db19a6d9bd4e7978aec)の記事のようにこれは設定したほうがよさそう

### 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

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

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

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

```html
<nav class="nav">
```

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