Help us understand the problem. What is going on with this article?

htmllintのオプション

概要

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
# これでエラー出力される
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした