vue3 TS 如何在vsCode中提示属性可选值？

Question

// Test.vue
<template>
  <div>
    {{ name }}
  </div>
</template>
<script setup lang="ts">
interface Props {
  name: 'jie' | 'su' | 'summer'
}
defineProps<Props>()
</script>

没有报错也没提示。

---

我希望得到下面的体验，该怎么写？

Answer 1

使用pnpm命令创建的vite项目 unplugin-vue-components 无法在vscode中获得组件类型提示
#406

Answer 2

interface声明的时候设为可选:

<script setup lang="ts">
interface Props {
  name?: 'jie' | 'su' | 'summer'
}
defineProps<Props>()
</script>

Answer 3

你这里vxeColumn有相关的智能提示是因为这个组件做了vetur相关的配置

直接使用volar替换vetur就会有提示了