Skip to content

vue/require-prop-comment

require props to have a comment

📖 Rule Details

This rule enforces that every prop has a comment that documents it.

<script> export default defineComponent({ props: { // ✓ GOOD /** JSDoc comment */ a: Number, // ✗ BAD // line comment b: Number, /* block comment */ c: Number, d: Number, } }) </script>
Now loading...

🔧 Options

json
{
  "vue/require-prop-comment": ["error", {
    "type": "JSDoc"
  }]
}
  • type ... Type of comment. Default is "JSDoc"
    • "JSDoc" ... Only JSDoc comment are allowed.
    • "line" ... Only line comment are allowed.
    • "block" ... Only block comment are allowed.
    • "any" ... All comment types are allowed.

"type": "block"

<script setup> // ✓ GOOD const goodProps = defineProps({ /* block comment */ a: Number, }) // ✗ BAD const badProps = defineProps({ /** JSDoc comment */ b: Number, // line comment c: Number, d: Number, }) </script>
Now loading...

"type": "line"

<script setup> // ✓ GOOD const goodProps = defineProps({ // line comment a: Number, }) // ✗ BAD const badProps = defineProps({ /** JSDoc comment */ b: Number, /* block comment */ c: Number, d: Number, }) </script>
Now loading...

"type": "any"

<script setup> // ✓ GOOD const goodProps = defineProps({ /** JSDoc comment */ a: Number, /* block comment */ b: Number, // line comment c: Number, }) // ✗ BAD const badProps = defineProps({ d: Number, }) </script>
Now loading...

🚀 Version

This rule was introduced in eslint-plugin-vue v9.8.0

🔍 Implementation