noRestrictedElements (HTML)

Summary

Diagnostic Category: lint/correctness/noRestrictedElements
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Inspired from vue/no-restricted-html-elements
- Inspired from svelte/no-restricted-html-elements

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noRestrictedElements": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow the use of configured elements.

This rule disallows the use of configured elements in HTML, Vue, Svelte, and Astro files. Without elements configured, this rule doesn’t do anything.

This rule is useful when a project wants to enforce a component or a different element instead of certain HTML elements. For example, a project might restrict <a> in favor of a router link component that handles client-side navigation.

Native HTML, SVG, and MathML element names are matched case-insensitively, so restricting marquee also reports <MARQUEE>. Component names, such as <RouterLink> in Vue, Svelte, and Astro files, are matched exactly.

Options

`elements`

A map of element names to the message to show when the element is used. Defaults to no restricted elements.

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noRestrictedElements": {
6
          "level": "on",
7
          "options": {
8
            "elements": {
9
              "marquee": "Use CSS animations instead.",
10
              "RouterLink": "Use NuxtLink instead."
11
            }
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

Examples

Invalid

1
<marquee>Breaking news</marquee>

code-block.html:1:2 lint/correctness/noRestrictedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The marquee element is restricted in this project.
  
  > 1 │ <marquee>Breaking news</marquee>
      │  ^^^^^^^
    2 │ 
  
  ℹ Use CSS animations instead.

1
<template>
2
    <RouterLink to="/">Home</RouterLink>
3
</template>

code-block.vue:2:6 lint/correctness/noRestrictedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The RouterLink element is restricted in this project.
  
    1 │ <template>
  > 2 │     <RouterLink to="/">Home</RouterLink>
      │      ^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Use NuxtLink instead.

Valid

1
<template>
2
    <p>Breaking news</p>
3
    <NuxtLink to="/">Home</NuxtLink>
4
</template>