Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The syntax highlighting is not applied when destructuring props #4811

Open
yoshi-pi opened this issue Sep 5, 2024 · 2 comments · May be fixed by #4906
Open

The syntax highlighting is not applied when destructuring props #4811

yoshi-pi opened this issue Sep 5, 2024 · 2 comments · May be fixed by #4906
Labels
bug Something isn't working 🍰 p2-nice-to-have

Comments

@yoshi-pi
Copy link

yoshi-pi commented Sep 5, 2024

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.
image

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

Link to minimal reproduction

No response

Any additional comments?

No response
@ferferga
Copy link
Contributor

ferferga commented Sep 5, 2024

Same thing happens if using TypeScript type signature syntax:

image

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

image

@KazariEX KazariEX mentioned this issue Sep 23, 2024
Closed
@KazariEX KazariEX added bug Something isn't working 🍰 p2-nice-to-have and removed pending triage labels Oct 4, 2024
@KazariEX
Copy link
Collaborator

KazariEX commented Oct 4, 2024 •
edited
Loading

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

@KazariEX KazariEX linked a pull request Oct 4, 2024 that will close this issue
Open
@KazariEX KazariEX mentioned this issue Oct 21, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working 🍰 p2-nice-to-have
Projects
None yet
Milestone
No milestone
3 participants
@ferferga @yoshi-pi @KazariEX