The syntax highlighting is not applied when destructuring props

[yoshi-pi]

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

1.92.2

Vue version

3.5.1

TypeScript version

5.4.0

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.88 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.15.4 - /usr/local/bin/pnpm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 128.0.6613.115
    Edge: 128.0.2739.63
    Safari: 17.3.1

package.json dependencies

{
  "dependencies": {
    "vue": "^3.5.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "npm-run-all2": "^6.2.0",
    "prettier": "^3.2.5",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vue-tsc": "^2.0.21"
  }
}

Steps to reproduce

Write the following code:

<script setup>
const { foo } = defineProps({
  foo: {
    type: String,
    required: true
  }
})
console.log(foo)
</script>
<template>
  <div></div>
</template>

What is expected?

The object passed as an argument to defineProps should have syntax highlighting applied.

What is actually happening?

It is not highlighted.

As a note, syntax highlighting works if destructuring is not used.

Link to minimal reproduction

No response

Any additional comments?

No response

[ferferga]

Same thing happens if using TypeScript type signature syntax:

But if it's in a single line, syntax highlighting is correct:

[KazariEX]

This issue occurs on the theme of prioritizing semantic tokens (or explicitly set editor.semanticHighlighting.enabled as true).