Can't make type check for props work for global components with volar

Demo project

Hi! I’ve created a fresh vite app with this plugin, added globalComponentsDeclaration: true. The file components.d.ts is generated, but vscode doesn’t show me warnings of incorrect using of props, unless I import the component.

Button.vue:

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps({
  size: {
    type: String,
    required: true,
  },
})
</script>

Component is not imported (no type checks for props)

Component is imported, so type check works great.

I’m expecting to see something like that: https://twitter.com/antfu7/status/1397168229005463563 but can’t figure out what’s wrong.

And what’s more strange, this feature is working perfectly if I install a new vitesse project.

[xorik]

@antfu found the issue: By default vite have tsconfig.json:

  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ]

So file components.d.ts is not included. Vitesse in the other hand doesn’t have include, only exclude in the config.

Probably it makes sense to add it to readme, so other people won’t get confused.

[xorik]

Yes, plugin is on. I will try to compare libraries between this and vitesse, probably some package is messing with type definitions. https://user-images.githubusercontent.com/347044/120286326-68a2b300-c2be-11eb-8639-eab9dc08501a.mov