Add type-based declaration rule of defineProps and defineEmits

docs/rules/README.md

@@ -252,6 +252,8 @@ For example:
 | [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
 | [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
 | [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
+| [vue/prefer-type-emits-decl](./prefer-type-emits-decl.md) | enforce type-based `defineEmits` |  | :lipstick: |
+| [vue/prefer-type-props-decl](./prefer-type-props-decl.md) | enforce type-based `defineProps` |  | :lipstick: |
 | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  | :hammer: |
 | [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: |
 | [vue/require-expose](./require-expose.md) | require declare public properties using `expose` | :bulb: | :hammer: |

docs/rules/prefer-type-emits-decl.md

@@ -0,0 +1,56 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-type-emits-decl
+description: enforce type-based `defineEmits`
+---
+# vue/prefer-type-emits-decl
+
+> enforce type-based `defineEmits`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule forces developers to use the type-based declaration of `defineEmits` instead of runtime declaration.
+
+This rule only works in setup script and `lang="ts"`.
+
+<eslint-code-block :rules="{'vue/prefer-type-emits-decl': ['error']}">
+
+```vue
+<script setup lang="ts">
+/* ✓ GOOD */
+const emit = defineEmits<{
+  (e: 'change', id: number): void
+  (e: 'update', value: string): void
+}>()
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/prefer-type-emits-decl': ['error']}">
+
+```vue
+<script setup lang="ts">
+/* ✗ BAD */
+const emit = defineEmits(['change', 'update'])
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/prefer-type-props-decl](./prefer-type-props-decl.md)
+- [vue/valid-define-props](./valid-define-props.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-type-emits-decl.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-type-emits-decl.js)

docs/rules/prefer-type-props-decl.md

@@ -0,0 +1,57 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-type-props-decl
+description: enforce type-based `defineProps`
+---
+# vue/prefer-type-props-decl
+
+> enforce type-based `defineProps`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule forces developers to use the type-based declaration of `defineProps` instead of runtime declaration.
+
+This rule only works in setup script and `lang="ts"`.
+
+<eslint-code-block :rules="{'vue/prefer-type-props-decl': ['error']}">
+
+```vue
+<script setup lang="ts">
+/* ✓ GOOD */
+const props = defineProps<{
+  kind: string
+}>()
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/prefer-type-props-decl': ['error']}">
+
+```vue
+<script setup lang="ts">
+/* ✗ BAD */
+const props = defineProps({
+  kind: { type: String }
+})
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/prefer-type-emits-decl](./prefer-type-emits-decl.md)
+- [vue/valid-define-props](./valid-define-props.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-type-props-decl.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-type-props-decl.js)

docs/rules/valid-define-props.md

@@ -27,8 +27,8 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✓ GOOD */
-  defineProps({ msg: String })
+/* ✓ GOOD */
+defineProps({ msg: String })
 </script>
 ```
 
@@ -38,29 +38,29 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✓ GOOD */
-  defineProps(['msg'])
+/* ✓ GOOD */
+defineProps(['msg'])
 </script>
 ```
 
 </eslint-code-block>
 
 ```vue
 <script setup lang="ts">
-  /* ✓ GOOD */
-  defineProps<{ msg?:string }>()
+/* ✓ GOOD */
+defineProps<{ msg?: string }>()
 </script>
 ```
 
 <eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
 
 ```vue
 <script>
-  const def = { msg: String }
+const def = { msg: String }
 </script>
 <script setup>
-  /* ✓ GOOD */
-  defineProps(def)
+/* ✓ GOOD */
+defineProps(def)
 </script>
 ```
 
@@ -70,28 +70,28 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  const def = { msg: String }
-  defineProps(def)
+/* ✗ BAD */
+const def = { msg: String }
+defineProps(def)
 </script>
 ```
 
 </eslint-code-block>
 
 ```vue
 <script setup lang="ts">
-  /* ✗ BAD */
-  defineProps<{ msg?:string }>({ msg: String })
+/* ✗ BAD */
+defineProps<{ msg?: string }>({ msg: String })
 </script>
 ```
 
 <eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  defineProps({ msg: String })
-  defineProps({ count: Number })
+/* ✗ BAD */
+defineProps({ msg: String })
+defineProps({ count: Number })
 </script>
 ```
 
@@ -101,13 +101,13 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script>
-  export default {
-    props: { msg: String }
-  }
+export default {
+  props: { msg: String }
+}
 </script>
 <script setup>
-  /* ✗ BAD */
-  defineProps({ count: Number })
+/* ✗ BAD */
+defineProps({ count: Number })
 </script>
 ```
 
@@ -117,8 +117,8 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  defineProps()
+/* ✗ BAD */
+defineProps()
 </script>
 ```
 
@@ -128,6 +128,11 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 Nothing.
 
+## :couple: Related Rules
+
+- [vue/prefer-type-props-decl](./prefer-type-props-decl.md)
+- [vue/prefer-type-emits-decl](./prefer-type-emits-decl.md)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v7.13.0

lib/configs/no-layout-rules.js

@@ -41,6 +41,8 @@ module.exports = {
     'vue/object-property-newline': 'off',
     'vue/operator-linebreak': 'off',
     'vue/padding-line-between-blocks': 'off',
+    'vue/prefer-type-emits-decl': 'off',
+    'vue/prefer-type-props-decl': 'off',
     'vue/script-indent': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'vue/space-in-parens': 'off',

lib/index.js

@@ -162,6 +162,8 @@ module.exports = {
     'prefer-separate-static-class': require('./rules/prefer-separate-static-class'),
     'prefer-template': require('./rules/prefer-template'),
     'prefer-true-attribute-shorthand': require('./rules/prefer-true-attribute-shorthand'),
+    'prefer-type-emits-decl': require('./rules/prefer-type-emits-decl'),
+    'prefer-type-props-decl': require('./rules/prefer-type-props-decl'),
     'prop-name-casing': require('./rules/prop-name-casing'),
     'quote-props': require('./rules/quote-props'),
     'require-component-is': require('./rules/require-component-is'),

lib/rules/prefer-type-emits-decl.js

@@ -0,0 +1,53 @@
+/**
+ * @author Amorites
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce type-based `defineEmits`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/prefer-type-emits-decl.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      hasArg: 'Use type-based declaration instead of runtime declaration.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const scriptSetup = utils.getScriptSetupElement(context)
+    if (!scriptSetup || !utils.hasAttribute(scriptSetup, 'lang', 'ts')) {
+      return {}
+    }
+
+    return utils.defineScriptSetupVisitor(context, {
+      onDefineEmitsEnter(node) {
+        if (node.arguments.length > 0) {
+          context.report({
+            node,
+            messageId: 'hasArg'
+          })
+        }
+      }
+    })
+  }
+}

lib/rules/prefer-type-props-decl.js

@@ -0,0 +1,53 @@
+/**
+ * @author Amorites
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce type-based `defineProps`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/prefer-type-props-decl.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      hasArg: 'Use type-based declaration instead of runtime declaration.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const scriptSetup = utils.getScriptSetupElement(context)
+    if (!scriptSetup || !utils.hasAttribute(scriptSetup, 'lang', 'ts')) {
+      return {}
+    }
+
+    return utils.defineScriptSetupVisitor(context, {
+      onDefinePropsEnter(node) {
+        if (node.arguments.length > 0) {
+          context.report({
+            node,
+            messageId: 'hasArg'
+          })
+        }
+      }
+    })
+  }
+}