IntelliSence works inside of the script tag but doesn't work inside of <template>

[TalkativeGuy]

bandicam.2024-05-24.15-42-57-511.mp4

Description

As can be seen on the video, the pop-up hints for the data values work when typed inside of the script tag (e. g. in a method), but when it comes to the template - it only works for the "top layer", so the hints do display the data values (not always though), but not their properties after the dot. The issue applies for both anonymous an ts-typed objects. Doesn't display errors if something is wrong either.

What was attempted

• Reinstalling the extension
• Enabling/disabling the built-in TS extension (@builtin types) and another single vue snippets extension I have
• Downgrading to 1.8.27 as was suggested in another similar issue. Surprisingly, it started acting the other way around: working in template, not working in script tag. LoL.
• Reloading VS Code for a million times including when downgraded to 1.8.27
• I wanted to try and reinstall VS Code completely, but then I remembered I just had it installed a couple of days ago on by partner's laptop as mine was unavailable for a while, and it had the same issue.

Back when it was Volar, it worked perfectly fine in both HTML and TS, but now it won't let me install it back again and my experience is now ruined :(

[so1ve]

Could you please provide your code? I'm not sure if it is vuejs/core#9296

[TalkativeGuy]

Could you please provide your code? I'm not sure if it is vuejs/core#9296

Even in the most simple file possible it fails. This one has the exactly same structure as the file in the video)

I've figured out though that in my other project that runs on Vue CLI (instead of Vite for this one), everything works fine. So must be something about Vite? Here's my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": false,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true,
    "types": ["node", "vite/client"],

    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    // "resolveJsonModule": false,
    // "isolatedModules": false,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
	
    /* These ones I tried switching back and forth already */
    "importHelpers": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue, ./src/**/**/*.ts"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

And vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

[MrMarble]

I have the same error, even the type definition shows any instead of the correct types.

Works fine inside script tag

Nothing inside template

• vue: v3.4.27
• vite: v5.2.11
• vscode extension: v2.0.19
• vscode: 1.89.1

[TalkativeGuy]

I've figured it out. Turns out when trying to solve the problem I made a typo in the include section in tsconfig.json. Looks like I have solved the problem after that by doing something else but it kept not working because of that typo. I think updating all the modules did the job but of course can't say for sure now. Anyway if anyone runs into a problem like this try doing everything I listed in the question. Except for downgrading to a previous version as this one seems to work fine.

The typo I had just in case you're interested:

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

Instead of

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