手始めに markuplint を導入する
By jiyuujin at
下記の通り示す順に見ていくことにします。
- 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 " の仕様に準拠していない場合に警告します。
::: message is-primary
明確な違反
- 仕様に存在しないロールを使用する
- 抽象的なロールを使用する
- 設定されたロール (または暗黙のロール) に属さないプロパティまたはステートを使用する
- プロパティ/ステートの無効な値を使用する
- HTML の ARIA に従って許可されていないロールを使用する
- 必須のプロパティまたは状態を設定しない
推奨されない
- 非推奨のプロパティまたは状態を設定する
- HTML の ARIA に従って明示的に暗黙的な役割を設定する
- HTML の ARIA に従って、その要素がそれに相当するセマンティックな 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