Add new rule: no-restricted-html-elements

docs/rules/html-forbid-elements.md

@@ -0,0 +1,49 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/html-forbid-elements
+description: prevent use of forbidden html elements
+since: v8.6.0
+---
+
+# vue/html-forbid-elements
+
+> prevent use of forbidden html elements
+
+## :book: Rule Details
+
+This rule aims to disallow html elements that have been forbidden.
+
+<eslint-code-block fix :rules="{'vue/html-forbid-elements': ['error', { forbid: ['div', 'button'] } ] }">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <p></p>
+  <input />
+  <br />
+
+  <!-- ✗ BAD -->
+  <button></button>
+  <div></div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/html-forbid-elements": ["error", { "forbid": ["button"] }]
+}
+```
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.6.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-forbid-elements.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-forbid-elements.js)

lib/index.js

@@ -40,6 +40,7 @@ module.exports = {
     'html-comment-content-spacing': require('./rules/html-comment-content-spacing'),
     'html-comment-indent': require('./rules/html-comment-indent'),
     'html-end-tags': require('./rules/html-end-tags'),
+    'html-forbid-elements': require('./rules/html-forbid-elements'),
     'html-indent': require('./rules/html-indent'),
     'html-quotes': require('./rules/html-quotes'),
     'html-self-closing': require('./rules/html-self-closing'),

lib/rules/html-forbid-elements.js

@@ -0,0 +1,66 @@
+/**
+ * @author Doug Wade <douglas.b.wade@gmail.com>
+ */
+
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'prevent usage of forbidden html elements',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/html-forbid-elements.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          forbid: {
+            type: 'array',
+            uniqueItems: true,
+            minItems: 1,
+            items: {
+              type: 'string'
+            }
+          }
+        },
+        required: ['forbid']
+      }
+    ],
+    messages: {
+      unexpectedUseOfForbiddenElement:
+        'Unexpected use of forbidden HTML element {{ actual }}.'
+    }
+  },
+  /**
+   * @param {RuleContext} context - The rule context.
+   * @returns {RuleListener} AST event handlers.
+   */
+  create(context) {
+    const option = context.options[0]
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /**
+       * @param {VElement} node
+       */
+      VElement(node) {
+        if (!utils.isHtmlElementNode(node)) {
+          return
+        }
+
+        if (option.forbid.includes(node.name)) {
+          context.report({
+            messageId: 'unexpectedUseOfForbiddenElement',
+            node: node.startTag,
+            data: { actual: node.name }
+          })
+        }
+      }
+    })
+  }
+}

tests/lib/rules/html-forbid-elements.js

@@ -0,0 +1,41 @@
+/**
+ * @author Doug Wade
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/html-forbid-elements')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+tester.run('html-forbid-elements', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: '',
+      options: [{ forbid: ['button'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div class="foo"></div></template>',
+      options: [{ forbid: ['button'] }]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><button type="submit"></button></template>',
+      errors: ['Unexpected use of forbidden HTML element button.'],
+      options: [{ forbid: ['button'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: "<template><div class='foo'></div></template>",
+      errors: ['Unexpected use of forbidden HTML element div.'],
+      options: [{ forbid: ['div'] }]
+    }
+  ]
+})