prefer-builtin-properties-and-methods

[fisker]

Please describe what the rule should do:

Prefer use $emit, $slots, etc in <template> instead of variables defined in <script>.

What category should the rule belong to?

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

Provide 2-3 code examples that this rule should warn about:

<!-- Bad -->
<script setup>
const emit = defineEmits('foo')
</script>
<template>
	<button @click="emit('foo')">Foo</button>
</template>

<!-- Good -->
<script setup>
const emit = defineEmits('foo')
</script>
<template>
	<button @click="$emit('foo')">Foo</button>
</template>

<!-- Bad -->
<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
</script>
<template>
	<div>
		<div v-if="slots.foo"><slot name="foo"></slot></div>
	</div>
</template>

<!-- Good -->
<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
</script>
<template>
	<div>
		<div v-if="$slots.foo"><slot name="foo"></slot></div>
	</div>
</template>

Additional context

It can also apply to other properties and methods

[ota-meshi]

Thank you for proposing the rule. That rule sounds good to me.
But some users may prefer the opposite style. I think it would be better if it was an option.
What do you think?

[jacekkarczmarczyk]

Definitely, there should be a possibility to set always or never