New rule vue/require-macro-variable-name

[szulcus]

What rule do you want to change?
New config fields:

• Require using a defined name for the define* variable (e.g. { "name": "props" })
• Require name prefix in html (not for vue/define-emits-declaration e.g. { "prefix": true })

Does this change cause the rule to produce more or fewer warnings?
More (depends on configuration).

How will the change be implemented? (New option, new default behavior, etc.)?
The default behavior does not change the current behavior of the rule.

Please provide some example code that this change will affect:

"vue/define-props-declaration": ["error", "type-based", { "name": "props" } ]

interface Props {
  active: boolean;
}
// GOOD
const props = defineProps<Props>();
// BAD
const myProps = defineProps<Props>();

"vue/define-props-declaration": ["error", "type-based", { "prefix": true } ]

<template>
  <!-- GOOD-->
  {{ props.active }}
  <!-- BAD-->
  {{ active }}
  {{ $props.active }}
</template>

"vue/define-slots-declaration": ["error", "always", { "name": "slots", "prefix": true } ]

<template>
  <!-- GOOD-->
  {{ slots }}
  {{ slots.default }}
  <!-- BAD-->
  {{ $slots }}
  {{ $slots.default }}
</template>

"vue/define-attrs-declaration": ["error", "always", { "name": "attrs", "prefix": true } ]

<template>
  <!-- GOOD-->
  {{ attrs }}
  <!-- BAD-->
  {{ $attrs}}
</template>

What does the rule currently do for this code?
https://eslint.vuejs.org/rules/define-props-declaration.html

[FloEdelmann]

Those are two different requests. The second one sounds like #2172; this should not be part of the vue/define-*-declaration rules.

The first one sounds good, but might also be better suited as a new rule (one for all, with good defaults). I suggest the name vue/require-macro-variable-name with one options object to customize the names. The default would be:

{
  defineProps: 'props',
  defineEmits: 'emit',
  defineSlots: 'slots',
  useSlots: 'slots',
  useAttrs: 'attrs',
}

[szulcus]

@FloEdelmann I like your proposal :)