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

[armano2]

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
  js { foo: { default () {} } }
• by literal value
  js { 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]

I don't think that name for this rule is ok, we should find out something more accurate.

[armano2]

@michalsnik what do you think about this? can i start working on this?

[michalsnik]

I'm thinking maybe we should add require-default-prop rule instead, like here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md and additionally warn about wrong type of default prop in it? But that might be too much as for one rule. So I'm ok with the current rule too.

[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