feat: Add no-empty-component-block rule

Author: tyankatsu0105

docs/rules/no-empty-component-block.md

@@ -0,0 +1,68 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-empty-component-block
+description: disallow the `<template>` `<script>` `<style>` block to be empty
+---
+# vue/no-empty-component-block
+> disallow the `<template>` `<script>` `<style>` block to be empty
+
+## :book: Rule Details
+
+This rule disallows the `<template>` `<script>` `<style>` block to be empty.
+
+This rule also checks block what has attribute `src`.
+See: https://vue-loader.vuejs.org/spec.html#src-imports
+
+<eslint-code-block :rules="{'vue/no-empty-component-block': ['error']}">
+
+```vue
+// ✓ GOOD
+<template>
+  <p>foo</p>
+</template>
+
+<script>
+  console.log('foo')
+</script>
+
+<style>
+  p {
+    display: inline;
+  }
+</style>
+
+<template src="./template.html"></template>
+<template src="./template.html" />
+
+<script src="./script.js"></script>
+<script src="./script.js" />
+
+<style src="./style.css"></style>
+<style src="./style.css" />
+
+
+// ✗ BAD
+<template></template>
+<template />
+<template src="" />
+
+<script></script>
+<script />
+<script src="" />
+
+<style></style>
+<style />
+<style src="" />
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-empty-component-block.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-empty-component-block.js)

lib/rules/no-empty-component-block.js

@@ -0,0 +1,79 @@
+/**
+ * @author tyankatsu <https://github.com/tyankatsu0105>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+/**
+ * check whether has attribute `src`
+ */
+function hasAttributeSrc(componentBlock) {
+  const hasAttribute = componentBlock.startTag.attributes.length > 0
+
+  const hasSrc =
+    componentBlock.startTag.attributes.filter(
+      (attribute) =>
+        attribute.key.name === 'src' && attribute.value.value !== ''
+    ).length > 0
+
+  return hasAttribute && hasSrc
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'disallow the `<template>` `<script>` `<style>` block to be empty',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-empty-component-block.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpected: '`<{{ blockName }}>` is empty. Empty block is not allowed.'
+    }
+  },
+
+  /**
+   * @param {RuleContext} context - The rule context.
+   * @returns {RuleListener} AST event handlers.
+   */
+  create(context) {
+    return {
+      Program(node) {
+        const componentBlocks = node.templateBody.parent.children
+
+        for (const componentBlock of componentBlocks) {
+          if (
+            componentBlock.name !== 'template' &&
+            componentBlock.name !== 'script' &&
+            componentBlock.name !== 'style'
+          )
+            return
+
+          // https://vue-loader.vuejs.org/spec.html#src-imports
+          if (hasAttributeSrc(componentBlock)) return
+
+          if (componentBlock.children.length === 0) {
+            context.report({
+              node: componentBlock,
+              loc: componentBlock.loc,
+              messageId: 'unexpected',
+              data: {
+                blockName: componentBlock.name
+              }
+            })
+          }
+        }
+      }
+    }
+  }
+}

tests/lib/rules/no-empty-component-block.js

@@ -0,0 +1,130 @@
+/**
+ * @author tyankatsu <https://github.com/tyankatsu0105>
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-empty-component-block')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2018 }
+})
+
+tester.run('no-empty-component-block', rule, {
+  valid: [
+    `<template><p>foo</p></template>`,
+    `<template><p>foo</p></template><script>console.log('foo')</script>`,
+    `<template><p>foo</p></template><script>console.log('foo')</script><style>p{display: inline;}</style>`,
+
+    `<template src="./template.html"></template>`,
+    `<template src="./template.html" />`,
+
+    `<template src="./template.html"></template><script src="./script.js"></script>`,
+    `<template src="./template.html" /><script src="./script.js" />`,
+
+    `<template src="./template.html"></template><script src="./script.js"></script><style src="./style.css"></style>`,
+    `<template src="./template.html" /><script src="./script.js" /><style src="./style.css" />`
+  ],
+  invalid: [
+    {
+      code: '<template></template>',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template src="" />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template></template><script></script>',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template /><script />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template src="" /><script src="" />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template></template><script></script><style></style>',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template /><script /><style />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.'
+        }
+      ]
+    },
+    {
+      code: '<template src="" /><script src="" /><style src="" />',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.'
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.'
+        }
+      ]
+    }
+  ]
+})