Intellisense/auto completion in vs code inconsistent behaviour

[nagylzs]

Please see the video below. <v- tags are no recognized, autocompletete does not work by default. However, if I use the full class name then autocomplete works for any component, and after that it also works for <v- tags.

It is very easy to reproduce, just create a new vuetify typescript project yarn create vuetify then open it in vscode (with vue official plugin installed).

Version: 1.90.0 Commit: 6319a0b6210a13408ab1ef44be93444143942ea8 Date: 2024-05-03T07:47:29.201Z Electron: 28.3.1 ElectronBuildId: undefined Chromium: 120.0.6099.291 Node.js: 18.18.2 V8: 12.0.267.19-electron.0 OS: Linux x64 6.6.30-2-MANJARO Vue plugin version 2.0.17

 npm version
{
  npm: '10.7.0',
  node: '20.13.0',
  acorn: '8.11.3',
  ada: '2.7.8',
  ares: '1.28.1',
  base64: '0.5.2',
  brotli: '1.1.0',
  cjs_module_lexer: '1.2.2',
  cldr: '44.1',
  icu: '74.2',
  llhttp: '8.1.2',
  modules: '115',
  napi: '9',
  nghttp2: '1.61.0',
  openssl: '3.3.0',
  simdutf: '5.2.4',
  tz: '2023c',
  undici: '6.13.0',
  unicode: '15.1',
  uv: '1.48.0',
  uvwasi: '0.0.20',
  v8: '11.3.244.8-node.20',
  zlib: '1.3.1'
}

https://github.com/vuejs/language-tools/assets/15814836/013bc1c9-4580-4847-a595-de001f804082

[nagylzs]

Note: when I insert a CamelCase tag into the template, its import statement is added to the setup automatically, e.g.

<script setup lang="ts">
import { VImg } from 'vuetify/components/VImg';
import { VCard, VCol, VOverlay, VRow } from 'vuetify/lib/components/index.mjs';

  //
</script>

and only the <v- tags for these imported classes can be autocompleted.

[RayGuo-ergou]

vuetify template does not include the type file in tsconfig ( or anywhere in the code). So typescript server does not know.

see node_modules/vuetify/dist/vuetify.d.ts

a related issue in vuetify repo : https://github.com/vuetifyjs/vuetify/issues/17269

[nagylzs]

• Looks like the problem is not vuejs but vuetify. Should I move this issue to https://github.com/vuetifyjs/vuetify ?
• Is there a way to add type file(s) manually?

I'm trying to switch from React to Vue, and the missing type declarations make the transition quite difficult. I don't "remember" the property/slot names, because I have zero experience with Vue and Vuetify.

[RayGuo-ergou]

Haven't using vuetify for ages but had a try. You can add vuetify to types array in tsconfig. ( as it declared in vuetify package.json )

e.g.

"types": [ "vuetify" ],

but because i am using pnpm so i have to change @vue/runtime-core to vue in node_modules/vuetify/lib/index.d.mts I guess if you use yarn that should be fine.

PS: this issue isn't about vue or react, it's a typescript thing.

[nagylzs]

yarn create vuetify generated this in tsconfig.json

    "types": [
      "vite/client",
      "vite-plugin-vue-layouts/client",
      "unplugin-vue-router/client"
    ],

Changed to:

    "types": [
      "vite/client",
      "vite-plugin-vue-layouts/client",
      "unplugin-vue-router/client",
      "vuetify"
    ],

and restarted vs code, but it did not help. Then I canged node_modules/vuetify/lib/index.d.mts from this:

declare module '@vue/runtime-core' {

to this:

declare module 'vue' {

and restarted vs code again, but it did not help. Actually it made things worse, because now not even (property) VRow : any shows up when I hover the pointer over a <v- element.

[nagylzs]

PS: this issue isn't about vue or react, it's a typescript thing.

If it is possible to set this up correctly, then shouldn't yarn create vuetify do it?

[RayGuo-ergou]

I double checked vuetify's tsconfig file, I think something's missing e.g. it does not include files under src. Maybe worth to open an issue for that.

[RayGuo-ergou]

Try to change this to your includes, I copied from my another vue project

  "include": [
    "**/*.ts",
    "**/*.js",
    "**/*.d.ts",
    "**/*.tsx",
    "**/*.vue",
    "tests/setup.ts"
  ],

[nagylzs]

Try to change this to your includes, I copied from my another vue project

  "include": [
    "**/*.ts",
    "**/*.js",
    "**/*.d.ts",
    "**/*.tsx",
    "**/*.vue",
    "tests/setup.ts"
  ],

After adding that, I can autocomplete <v- tags and I can see their types. Color is changed to green

I'm submitting a bug report to vuetify.

Thank you for your help!

[nagylzs]

This is ridiculous. It is not possible to create this issue, because they only allow to create issues with the issue creator, and that is a form that requires me to add a "reproduction link" on play.vuetifyjs.com

But obviously, this error with tsconfig and intellisense/autocomplete is not something that can be demonstrated on the playground site.

And then, "Issues must be created with this form or they will be closed immediately."

I'm not sure how to submit this bug. :-(

[RayGuo-ergou]

vuetify create

I think this is the right repo