new-line-between-multi-line-property.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/new-line-between-multi-line-property	enforce new lines between multi-line properties in Vue components	v7.3.0

vue/new-line-between-multi-line-property

enforce new lines between multi-line properties in Vue components

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule aims at enforcing new lines between multi-line properties in Vue components to help readability

<script>
/* ✗ BAD */
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    focused: {
      type: Boolean,
      default: false,
      required: true
    },

    label: String,
    icon: String
  },
  computed: {

  }
}
</script>

<script>
/* ✓ GOOD */
export default {
  props: {
    value: {
      type: String,
      required: true
    },

    focused: {
      type: Boolean,
      default: false,
      required: true
    },

    label: String,
    icon: String
  },

  computed: {
    
  }
}
</script>

🔧 Options

{
  "vue/new-line-between-multi-line-property": ["error", {
    "minLineOfMultilineProperty": 2
  }]
}

• minLineOfMultilineProperty ... Define the minimum number of rows for a multi-line property. default 2

📚 Further Reading

• Style guide - Empty lines in component/instance options

🚀 Version

This rule was introduced in eslint-plugin-vue v7.3.0

🔍 Implementation

• Rule source
• Test source