From cc2912e3b16d7b34d0dad193c213b6cbb96ab743 Mon Sep 17 00:00:00 2001 From: waynzh Date: Mon, 9 Jun 2025 17:12:35 +0800 Subject: [PATCH 1/4] feat(no-restricted-html-elements): support all types element --- 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 ++++++++++++++++++- 4 files changed, 84 insertions(+), 11 deletions(-) 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 + } + ] } ] }) From 06bf465de13c9d1f76d46751803d2e63bd10d25d Mon Sep 17 00:00:00 2001 From: waynzh Date: Mon, 9 Jun 2025 17:24:26 +0800 Subject: [PATCH 2/4] chore: add changeset --- .changeset/true-oranges-heal.md | 5 +++++ 1 file changed, 5 insertions(+) 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..f49e665a8 --- /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 checks all types of elements. From 54803f93096896f78de463875b89ef04b9a87118 Mon Sep 17 00:00:00 2001 From: Flo Edelmann Date: Tue, 10 Jun 2025 13:59:56 +0200 Subject: [PATCH 3/4] Update changeset comment --- .changeset/true-oranges-heal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/true-oranges-heal.md b/.changeset/true-oranges-heal.md index f49e665a8..82ac700fd 100644 --- a/.changeset/true-oranges-heal.md +++ b/.changeset/true-oranges-heal.md @@ -2,4 +2,4 @@ 'eslint-plugin-vue': patch --- -[vue/no-restricted-html-elements](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now checks all types of elements. +[vue/no-restricted-html-elements](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now also checks SVG and MathML elements From 53c10014175a3f1580348e8a4ba5d5ae9a07fe3c Mon Sep 17 00:00:00 2001 From: Flo Edelmann Date: Tue, 10 Jun 2025 14:00:38 +0200 Subject: [PATCH 4/4] Add missing period --- .changeset/true-oranges-heal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/true-oranges-heal.md b/.changeset/true-oranges-heal.md index 82ac700fd..eba8b9a99 100644 --- a/.changeset/true-oranges-heal.md +++ b/.changeset/true-oranges-heal.md @@ -2,4 +2,4 @@ '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 +[vue/no-restricted-html-elements](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now also checks SVG and MathML elements.