Boolean props should be false by default always. (require-default-prop)

Tell us about your environment

• ESLint Version: 4.9.0
• eslint-plugin-vue Version: 3.13.1
• Node Version: 8.2.1

Please show your full configuration:

What did you do? Please include the actual source code causing the issue.

<script>
export default {
  props: {
    showText: {
      type: Boolean,
      default: true
    },
    autoPlay: Boolean
  }
}
</script>

What did you expect to happen? An error should be shown for the showText prop indicating that it should not have a default of true. The autoPlay prop should considered correct even with the require-default-prop rule turned on.

What actually happened? Please include the actual, raw output from ESLint. With the require-default-prop rule enabled, autoPlay will be flagged. showText will be considered correct.

To make Vue components work like idiomatic HTML elements Boolean attributes/props should always default to false. If a Boolean prop defaults to true then a user who wants to turn that prop off has to bind the prop to a constant false (e.g., :show-text="false").

The require-default-prop rule would need to be modified to either enforce this, or ignore Boolean props. If the rule ignores Boolean props, then a new rule could be added to enforce proper Boolean props.

Boolean props should also never be required.

someBooleanProp: Boolean is how all Boolean props should be declared. There’s no need for any other prop options.

At the very least, something should be added to the rules to allow enforcing this. I also believe this rule should be added to the Style Guide.

[shroudedcode]

But sometimes, you want notifications that aren’t dismissible, so you make the behavior optional with a new dismissible prop that defaults to true.

@chrisvfritz This prop could be named persistent making it false by default.

<alert dismissible="false">You have to accept our new terms to continue using XY.</alert>
<!-- vs -->
<alert persistent>You have to accept our new terms to continue using XY.</alert>

I can’t think of a single situation where this problem cannot be solved by renaming the prop. I think that with the right error message this rule could really benefit developers, especially if it includes a tip like this:

Try to inverse the name of the prop: If the component is not '{{ currentName }}', it's ...?

If I find the time, I might have a shot at implementing this rule.

[mysticatea]

I feel that this is a good idea 👍, but it should be separated from require-default-prop rule.