Using Presets
There are some presets. It recommends specifying these because rules need to enable each.
Applying presets
Specify the extends
property of the configuration like below:
{
"extends": ["markuplint:recommended"]
}
You can choose some base presets appropriately for your preference.
{
"extends": ["markuplint:html-standard", "markuplint:a11y"]
}
Base presets
markuplint:a11y
markuplint:html-standard
markuplint:performance
markuplint:rdfa
markuplint:security
See rulesets what each preset include those.
Recommended presets
markuplint:recommended
markuplint:recommended-static-html
markuplint:recommended-react
markuplint:recommended-vue
markuplint:recommended-svelte
These recommended presets include all base presets. And each has specific rulesets except markuplint:recommended
.
Rulesets of base presets
Ruleset | Description | 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 ambiguous Navigable Target Names | ✅ | ❌ | ❌ | ❌ | ❌ | |
No consecutive <br> | ✅ | ❌ | ❌ | ❌ | ❌ | |
No refer to no existent ID | ✅ | ✅ | ❌ | ❌ | ❌ | |
Require accessible name | ✅ | ❌ | ❌ | ❌ | ❌ | |
Require <h1> | ✅ | ❌ | ❌ | ❌ | ❌ | |
Align row and column | ✅ | ❌ | ❌ | ❌ | ❌ | |
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. | ❌ | ❌ | ❌ | ✅ | ❌ |
Ruleset of syntax specific presets
Ruleset | Description | 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. | ✅ | ❌ | ❌ | ❌ |