Enforce defineComponent for options API components with Typescript

[GeoffreyParrier]

Please describe what the rule should do:

When we use Option API (in typescript and javascript) it is better to use defineComponent to enable props type inference (1).
A rule should be available to enforce it.

What category should the rule belong to?

• 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:

Should error on:

<script lang="ts">
export default {
 // ...
}
</script>

<script>
export default {
  // ...
}
</script>

Should not error on:

<script lang="ts">
export default defineComponent({
  // ...
})
</script>

<script setup>
// ...
</script>

<script lang="ts" setup>
// ...
</script>

Additional context

(1) source : https://vuejs.org/guide/typescript/composition-api#without-script-setup

[FloEdelmann]

Thanks for the suggestion! I think it would be a good rule, but not only for lang="ts", but all Vue components (that are defined using the Options API, not for <script setup>). This is because even for JavaScript components, using defineComponent helps autocompletion in the editor, prepares for a possible TypeScript migration, and increases consistency, with no downsides.

So it should also report an error for:

<script>
export default {
  // ...
}
</script>

And for Vue 2's way of getting TypeScript support:

<script>
export default Vue.extend({
  // ...
})
</script>

As a name, I'd suggest vue/prefer-define-component. In v10, I think this could be added to the recommended configs. PRs to implement this are welcome 🙂

The implementation might be somewhat similar to vue/require-direct-export, vue/require-default-export and vue/one-component-per-file.

[absidue]

In Vue 2.7 the defineComponent() function was backported from Vue 3, while it isn't perfect (props and methods don't get auto-completed because of bugs in Vue 2's types that will never get fixed as Vue 2 is EOL), at least in my experience it provides better auto-complete than Vue.extend(). It also has the advantage of also existing in Vue 3, so people who want to migrate to Vue 3 have to change less code when they use defineComponent() than they would have to with Vue.extend().