JS.VUE.NEW.LINE.BETWEEN.MULTI.LINE.PROPERTY

Rule Details

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

{'vue/new-line-between-multi-line-property': ['error']}

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

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

  }
}
</script>

{'vue/new-line-between-multi-line-property': ['error']}

<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 (https://vuejs.org/style-guide/rules-recommended.html#empty-lines-in-component-instance-options)