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/.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/.markdownlintignore b/.markdownlintignore index 3c3629e64..e7becf85b 100644 --- a/.markdownlintignore +++ b/.markdownlintignore @@ -1 +1,2 @@ node_modules +CHANGELOG.md 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/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", 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 + } + ] } ] })