require-prop-comment.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/require-prop-comment	require props to have a comment	v9.8.0

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>

🔧 Options

{
  "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>

"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>

"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>

🚀 Version

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

🔍 Implementation

• Rule source
• Test source