プリセットをつかう
いくつかのプリセットがあります。ルールはそれぞれを有効にする必要があるため、これらを指定することをオススメします。
プリセットの適用
設定のextendsプロパティを以下のように指定します。
{
"extends": ["markuplint:recommended"]
}
好みに合わせて、いくつかの基本プリセットを選択できます。
{
"extends": ["markuplint:html-standard", "markuplint:a11y"]
}
基本プリセット
markuplint:a11ymarkuplint:html-standardmarkuplint:performancemarkuplint:rdfamarkuplint:security
各プリセットに含まれるルールセットを参照してください。
推奨プリセット
markuplint:recommendedmarkuplint:recommended-static-htmlmarkuplint:recommended-reactmarkuplint:recommended-vuemarkuplint:recommended-svelte
これらの推奨プリセットには、**すべての基本プリセット**が含まれています。また、markuplint:recommended以外はそれぞれ固有のルールセットを持っています。
基本プリセットのルールセット
| ルールセット | 解説 | a11y | html-standard | performance | rdfa | security |
|---|---|---|---|---|---|---|
| Must not duplicate ID | Be able to avoid problems in assistive technologies from the viewpoint of machine readability. | ✅ | ✅ | ❌ | ❌ | ❌ |
Disallow accesskey attr | ✅ | ❌ | ❌ | ❌ | ❌ | |
tabindex attr only -1 or 0 | ✅ | ❌ | ❌ | ❌ | ❌ | |
<label> should have control | ✅ | ❌ | ❌ | ❌ | ❌ | |
| Use landmark | ✅ | ❌ | ❌ | ❌ | ❌ | |
| Popover trigger and target must be adjacent | ✅ | ❌ | ❌ | ❌ | ❌ | |
No consecutive <br> | ✅ | ❌ | ❌ | ❌ | ❌ | |
| No refer to no existent ID | ✅ | ✅ | ❌ | ❌ | ❌ | |
| Require accessible name | ✅ | ❌ | ❌ | ❌ | ❌ | |
Require <h1> | ✅ | ❌ | ❌ | ❌ | ❌ | |
Use <ul> | ✅ | ❌ | ❌ | ❌ | ❌ | |
| Conform to WAI-ARIA | ✅ | ❌ | ❌ | ❌ | ❌ | |
Require <html lang> | ✅ | ❌ | ❌ | ❌ | ❌ | |
Require <abbr title> | ✅ | ❌ | ❌ | ❌ | ❌ | |
Require <track> | ✅ | ❌ | ❌ | ❌ | ❌ | |
Require <video muted> | ✅ | ❌ | ❌ | ❌ | ❌ | |
| No merge cells | ✅ | ❌ | ❌ | ❌ | ❌ | |
<summary> no contains interactive contents | There is a case where an assistive technology can't access contents, or contents don't propagate a mouse event to <summary>. | ✅ | ❌ | ❌ | ❌ | ❌ |
Disallow autofocus attr to except in the dialog scope | Don't take away a focus to forced. However, the dialog element and its descendants allow it. | ✅ | ❌ | ❌ | ❌ | ❌ |
| No duplicate attr | The parser ignores all such duplicate occurrences of the attribute. | ❌ | ✅ | ❌ | ❌ | ❌ |
| No use deprecated attr | You should not use deprecated attributes from the viewpoint of compatibility. | ❌ | ✅ | ❌ | ❌ | ❌ |
| No use deprecated element | You should not use deprecated elements from the viewpoint of compatibility. | ❌ | ✅ | ❌ | ❌ | ❌ |
Require doctype | It has the effect of avoiding quirks mode. | ❌ | ✅ | ❌ | ❌ | ❌ |
| Must not skip heading levels | ❌ | ✅ | ❌ | ❌ | ❌ | |
| No use ineffective attr | ❌ | ✅ | ❌ | ❌ | ❌ | |
No duplicate names in <dl> | Within a single dl element, there should not be more than one dt element for each name. | ❌ | ✅ | ❌ | ❌ | ❌ |
| No use orphaned end tag | ❌ | ✅ | ❌ | ❌ | ❌ | |
| Allow only permitted contents | ❌ | ✅ | ❌ | ❌ | ❌ | |
| Need placeholder label option | ❌ | ✅ | ❌ | ❌ | ❌ | |
Require the datetime attribute if the content of the time element is invalid | ❌ | ✅ | ❌ | ❌ | ❌ | |
| Specify required attr | ❌ | ✅ | ❌ | ❌ | ❌ | |
Specify charset=UTF-8 | ❌ | ✅ | ❌ | ❌ | ❌ | |
No use <small> as subheadings | Should not use it in <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. | ❌ | ✅ | ❌ | ❌ | ❌ |
No use <caption> within <figure> | When <table> is the only content in <figure> other than <figcaption>, <caption> should be omitted in favor of <figcaption>. | ❌ | ✅ | ❌ | ❌ | ❌ |
Require title attr in <input pattern> | When an <input> element has a pattern attribute specified, authors should include a title attribute to give a description of the pattern. | ❌ | ✅ | ❌ | ❌ | ❌ |
No nested same <details> name group | ❌ | ✅ | ❌ | ❌ | ❌ | |
Require charset=UTF-8 | ❌ | ❌ | ✅ | ❌ | ❌ | |
Require defer attr | Should load and parse scripts lazily to avoid render-blocking. | ❌ | ❌ | ✅ | ❌ | ❌ |
| Require aspect-ratio | Require width and height attr with <img> to avoid Cumulative Layout Shift | ❌ | ❌ | ✅ | ❌ | ❌ |
Require loading <iframe> lazily | Require loading=lazy with <iframe> to avoid render-blocking that causes loading if its element is out of the viewport. | ❌ | ❌ | ✅ | ❌ | ❌ |
Allow property attr with <meta> | Be able to use Open-Graph etc. | ❌ | ❌ | ❌ | ✅ | ❌ |
構文固有のルールセット
| ルールセット | 解説 | recommended-static-html | recommended-react | recommended-vue | recommended-svelte |
|---|---|---|---|---|---|
| No hard coding ID | The component that hard-coded ID cannot mount to an app duplicated because the IDs must be unique in a document. Recommend to specify dynamic IDs to avoid doing that. | ❌ | ✅ | ✅ | ✅ |
| Use character reference | ✅ | ❌ | ❌ | ❌ | |
| No omit end-tag | Recommend to write an end-tag always because it is too difficult for a human decide an element is end-tag omittable. | ✅ | ❌ | ❌ | ❌ |