From aeef72c8d2d0dec637e33e5df8fa6178bae89d74 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 8 Jun 2025 11:36:58 +0900 Subject: [PATCH 1/3] Updates resources (#2752) Co-authored-by: ota-meshi <16508807+ota-meshi@users.noreply.github.com> Co-authored-by: Yosuke Ota --- .changeset/smooth-jokes-eat.md | 5 +++++ lib/utils/svg-elements.json | 1 - 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 .changeset/smooth-jokes-eat.md diff --git a/.changeset/smooth-jokes-eat.md b/.changeset/smooth-jokes-eat.md new file mode 100644 index 000000000..e5f3a14a8 --- /dev/null +++ b/.changeset/smooth-jokes-eat.md @@ -0,0 +1,5 @@ +--- +"eslint-plugin-vue": patch +--- + +Updates resources diff --git a/lib/utils/svg-elements.json b/lib/utils/svg-elements.json index eedbf0d07..f214aad24 100644 --- a/lib/utils/svg-elements.json +++ b/lib/utils/svg-elements.json @@ -7,7 +7,6 @@ "clipPath", "defs", "desc", - "discard", "ellipse", "feBlend", "feColorMatrix", From 66dab39a878b77a1884633b78bcaec6d3a5c3820 Mon Sep 17 00:00:00 2001 From: yosuke ota Date: Sun, 8 Jun 2025 14:24:34 +0900 Subject: [PATCH 2/3] chore: ignore CHANGELOG.md from markdownlint --- .markdownlintignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.markdownlintignore b/.markdownlintignore index 3c3629e64..e7becf85b 100644 --- a/.markdownlintignore +++ b/.markdownlintignore @@ -1 +1,2 @@ node_modules +CHANGELOG.md From ca973010b511755488eeac2851ffd6597f23ccb2 Mon Sep 17 00:00:00 2001 From: Wayne Zhang Date: Tue, 10 Jun 2025 20:41:24 +0800 Subject: [PATCH 3/3] feat(no-restricted-html-elements): support all element types (#2755) --- .changeset/true-oranges-heal.md | 5 ++ docs/rules/index.md | 2 +- docs/rules/no-restricted-html-elements.md | 10 +-- lib/rules/no-restricted-html-elements.js | 10 ++- .../lib/rules/no-restricted-html-elements.js | 73 ++++++++++++++++++- 5 files changed, 89 insertions(+), 11 deletions(-) create mode 100644 .changeset/true-oranges-heal.md diff --git a/.changeset/true-oranges-heal.md b/.changeset/true-oranges-heal.md new file mode 100644 index 000000000..eba8b9a99 --- /dev/null +++ b/.changeset/true-oranges-heal.md @@ -0,0 +1,5 @@ +--- +'eslint-plugin-vue': patch +--- + +[vue/no-restricted-html-elements](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now also checks SVG and MathML elements. diff --git a/docs/rules/index.md b/docs/rules/index.md index 7828b58bb..149f877ad 100644 --- a/docs/rules/index.md +++ b/docs/rules/index.md @@ -245,7 +245,7 @@ For example: | [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: | | [vue/no-restricted-component-options] | disallow specific component option | | :hammer: | | [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: | -| [vue/no-restricted-html-elements] | disallow specific HTML elements | | :hammer: | +| [vue/no-restricted-html-elements] | disallow specific elements | | :hammer: | | [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: | | [vue/no-restricted-static-attribute] | disallow specific attribute | | :hammer: | | [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` | | :hammer: | diff --git a/docs/rules/no-restricted-html-elements.md b/docs/rules/no-restricted-html-elements.md index fef08aeb2..9adc7a6ab 100644 --- a/docs/rules/no-restricted-html-elements.md +++ b/docs/rules/no-restricted-html-elements.md @@ -2,17 +2,17 @@ pageClass: rule-details sidebarDepth: 0 title: vue/no-restricted-html-elements -description: disallow specific HTML elements +description: disallow specific elements since: v8.6.0 --- # vue/no-restricted-html-elements -> disallow specific HTML elements +> disallow specific elements ## :book: Rule Details -This rule allows you to specify HTML elements that you don't want to use in your application. +This rule allows you to specify HTML, SVG, and MathML elements that you don't want to use in your application. @@ -33,7 +33,7 @@ This rule allows you to specify HTML elements that you don't want to use in your ## :wrench: Options -This rule takes a list of strings, where each string is an HTML element name to be restricted: +This rule takes a list of strings, where each string is an element name to be restricted: ```json { @@ -73,7 +73,7 @@ Alternatively, the rule also accepts objects. The following properties can be specified for the object. -- `element` ... Specify the HTML element or an array of HTML elements. +- `element` ... Specify the element name or an array of element names. - `message` ... Specify an optional custom message. ### `{ "element": "marquee" }, { "element": "a" }` diff --git a/lib/rules/no-restricted-html-elements.js b/lib/rules/no-restricted-html-elements.js index 8d5f3c300..ab52abde3 100644 --- a/lib/rules/no-restricted-html-elements.js +++ b/lib/rules/no-restricted-html-elements.js @@ -10,7 +10,7 @@ module.exports = { meta: { type: 'suggestion', docs: { - description: 'disallow specific HTML elements', + description: 'disallow specific elements', categories: undefined, url: 'https://eslint.vuejs.org/rules/no-restricted-html-elements.html' }, @@ -40,7 +40,7 @@ module.exports = { minItems: 0 }, messages: { - forbiddenElement: 'Unexpected use of forbidden HTML element {{name}}.', + forbiddenElement: 'Unexpected use of forbidden element {{name}}.', // eslint-disable-next-line eslint-plugin/report-message-format customMessage: '{{message}}' } @@ -55,7 +55,11 @@ module.exports = { * @param {VElement} node */ VElement(node) { - if (!utils.isHtmlElementNode(node)) { + if ( + !utils.isHtmlElementNode(node) && + !utils.isSvgElementNode(node) && + !utils.isMathElementNode(node) + ) { return } diff --git a/tests/lib/rules/no-restricted-html-elements.js b/tests/lib/rules/no-restricted-html-elements.js index 6180b046b..f89f58a11 100644 --- a/tests/lib/rules/no-restricted-html-elements.js +++ b/tests/lib/rules/no-restricted-html-elements.js @@ -36,6 +36,18 @@ tester.run('no-restricted-html-elements', rule, { filename: 'test.vue', code: '', options: [{ element: ['div', 'span'] }] + }, + // SVG + { + filename: 'test.vue', + code: '', + options: ['circle'] + }, + // Math + { + filename: 'test.vue', + code: '', + options: ['mi'] } ], invalid: [ @@ -45,7 +57,7 @@ tester.run('no-restricted-html-elements', rule, { options: ['button'], errors: [ { - message: 'Unexpected use of forbidden HTML element button.', + message: 'Unexpected use of forbidden element button.', line: 1, column: 16 } @@ -57,7 +69,7 @@ tester.run('no-restricted-html-elements', rule, { options: ['div'], errors: [ { - message: 'Unexpected use of forbidden HTML element div.', + message: 'Unexpected use of forbidden element div.', line: 1, column: 11 } @@ -96,6 +108,63 @@ tester.run('no-restricted-html-elements', rule, { column: 18 } ] + }, + // SVG + { + filename: 'test.vue', + code: '', + options: ['circle'], + errors: [ + { + message: 'Unexpected use of forbidden element circle.', + line: 1, + column: 16 + } + ] + }, + { + filename: 'test.vue', + code: '', + options: [ + { element: ['rect', 'path'], message: 'Use simplified shapes instead' } + ], + errors: [ + { + message: 'Use simplified shapes instead', + line: 1, + column: 16 + }, + { + message: 'Use simplified shapes instead', + line: 1, + column: 54 + } + ] + }, + // Math + { + filename: 'test.vue', + code: '', + options: ['mfrac'], + errors: [ + { + message: 'Unexpected use of forbidden element mfrac.', + line: 1, + column: 17 + } + ] + }, + { + filename: 'test.vue', + code: '', + options: [{ element: 'mo', message: 'Avoid using operators directly' }], + errors: [ + { + message: 'Avoid using operators directly', + line: 1, + column: 27 + } + ] } ] })