Rule Proposal: `vue/require-valid-default-prop`

Please describe what the rule should do:

Enforces prop default values to be valid. In vue we have 2 ways to define default prop value:

• by function

  {
    foo: {
      default () {}
    }
  }
  

• by literal value

  {
    foo: {
      default: ''
    }
  }
  

Literal value is not is not valid when type is specified and set to Array or Object

This rule should also check type of literal values and determine if types match. When variable is passed as default we should omit checking

What category of rule is this? (place an “X” next to just one item)

[ ] Enforces code style [x] Warns about a potential error [ ] Suggests an alternate way of doing something [ ] Other (please specify:)

Valid:

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    }
  }
})

Invalid:

Vue.component('example', {
  props: {
    propA: {
      type: String,
      default: {}
    },
    propB: {
      type: String,
      default: []
    },
    propC: {
      type: Object,
      default: []
    },
    propD: {
      type: Array,
      default: []
    },
    propE: {
      type: Object,
      default: { message: 'hello' }
    }
  }
})

see more at: https://vuejs.org/v2/guide/components.html#Prop-Validation

[armano2]

@michalsnik we should distinct both of rules, require-default-prop should be optional, and its should require to specify default value if "required" is not set or set to false.

require-valid-default-prop should be enabled by default (in next release), its catching errors / issues.

[lcspring]

good