下記の通り示す順に見ていくこととする。

• Lint とは
  • 効果的に Lint を使う
• markuplint とは
• markuplint を導入する
• markuplint 大きな特長を挙げる
• markuplint v2 とは

記事と合わせ 登壇スライド も作成している。

https://docs.google.com/presentation/d/1vvkYKVMRt6pYJSZC2Fm_eFKYxjhrqchfqn6UJBKikfU/edit?usp=sharing

Lint とは

まず Lint について、各個人によってコードの書き方は様々。機械的に体裁を整えることを目指し JavaScript や TypeScript の体裁を整える ESLint から CSS の体裁を整える StyleLint が存在している。

そこに HTML の体裁を整える MarkupLint が新たに登場、実際に JavaScript フレームワークで利用可能となった。

効果的に Lint を使う

エディタの機能を利用できれば、とりあえず十分。

• VSCode の editor.codeActionsOnSave を利用する
• JetBrains IDE の autoFix を利用する
• Git Hook (Husky) を利用する

ただ、これらの機能を利用するにしても設定ファイル (ESLint なら .eslintrc 、 MarkupLint なら .markuplintrc) を準備する必要がある。

markuplint とは

2021 年 1 月 W3C が HTML Living Standard を正式な勧告として発表。実際に HTML Living Standard の仕様に準拠した HTML となっているかを機械的に検証してくれる。

一時期、その W3C を起因としたゴタゴタもあり、かつて勧告された HTML5 はこれを機に廃止へ向かった。

markuplint を導入する

下記条件を踏まえてインストールを進める。

• ネーミングに関する規約を定める
• HTML 規格に準拠しているかチェックする
• コードスタイルをチェックする

マークアップを巡るアクセシビリティを考慮するため markuplint をインストールする。

npx markuplint --init

✔ Which do you use template engines? · No items were selected
✔ May I install them automatically? (y/N) · true
✔ Do you customize rules? (y/N) · true
✔ Are you going to conformance check according to HTML standard? (y/N) · true
✔ Are you going to do with accessibility better practices? (y/N) · true
✔ Are you going to set the convention about naming? (y/N) · true
✔ Are you going to check for the code styles? (y/N) · true

なお、ローカルに markuplint をインストールしていただいても構いません。

# npm
npm i -D markuplint

# yarn
yarn add -D markuplint

この markuplint に加え JavaScript フレームワークごとお世話となるプラグインが異なる。

• React では markuplint と合わせ @markuplint/jsx-parser や @markuplint/react-spec をインストールする
• Vue では markuplint と合わせ @markuplint/vue-parser や @markuplint/vue-spec をインストールする

各々、設定ファイル .markuplintrc の parser でインストールしたプラグインを読み込む。

markuplint 大きな特長を挙げる

markuplint 公式ウェブサイトには、 Accessibility の項目が存在する。

https://markuplint.dev/rules#accessibility

landmark-roles

banner , main , complementary and contentinfo がトップレベルのランドマークであるか警告する。

どのランドマークにも知覚できるコンテンツが存在するか警告する (Work in Progress)

required-h1

文書内に h1 要素が存在しない場合に警告する。

wai-aria

role 属性や aria-* 属性が WAI-ARIA や "ARIA in HTML " の仕様に準拠していない場合に警告する。

markuplint v2 とは

今年 1 月 12 日には v2 がリリースされた。

• ルールプリセット
  • markuplint:recommended を利用する
• plugins オプション
  • より自分たちのルールに合わせて拡張可能
    • ESLint でやってきたようなサードパーティ製をやっていき
• その他
  • selector プロパティ
  • regexSelector プロパティ

詳細は v2.0.0 をご確認いただきたい。

その内 extends オプションの提供開始は大きい。なお、現時点で提供されている markuplint:recommended 1 種類のみ。

{
  "extends": ["markuplint:recommended"]
}

とりあえずこれを設定しておけば良さそうです。

また、ルール並びに CLI オプションも追加されている。

• disallowed-element
• end-tag
• ineffective-attr
• no-boolean-attr-value
• no-default-value
• no-hard-code-id
• no-refer-to-non-existent-id
• no-use-event-handler-attr
• required-element

その他

記事と合わせ 登壇スライド も作成している。

https://docs.google.com/presentation/d/1vvkYKVMRt6pYJSZC2Fm_eFKYxjhrqchfqn6UJBKikfU/edit?usp=sharing

ルール一覧

Rule
attr-duplication
character-reference
deprecated-attr
deprecated-element
doctype
id-duplication
permitted-contents
required-attr
invalid-attr
landmark-roles
required-h1
wai-aria
class-naming
attr-equal-space-after
attr-equal-space-before
attr-spacing
attr-value-quotes
case-sensitive-attr-name
case-sensitive-tag-name
indentation