Component coloration not working

aleksandar-radev commented 2 weeks ago

Vue - Official extension or vue-tsc version

Vue - Official extension version 2.1.6

VSCode version

1.93.1

Vue version

3.4.21

TypeScript version

~5.4.0

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel Xeon Processor (Skylake, IBRS, no TSX)
    Memory: 10.03 GB / 15.24 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm

package.json dependencies

"dependencies": {
    "@primevue/themes": "^4.0.0",
    "axios": "^1.7.7",
    "dotenv": "^16.4.5",
    "luxon": "^3.5.0",
    "pinia": "^2.1.7",
    "primevue": "^4.0.7",
    "vue": "^3.4.21",
    "vue-i18n": "^9.13.1",
    "vue-material-design-icons": "^5.3.0",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@primeuix/styled": "^0.0.5",
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.6",
    "@types/luxon": "^3",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.4.5",
    "@vue/tsconfig": "^0.5.1",
    "cypress": "^13.7.2",
    "eslint": "^8.57.0",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-vue": "^9.23.0",
    "jsdom": "^24.0.0",
    "npm-run-all2": "^6.1.2",
    "prettier": "^3.2.5",
    "sass": "^1.77.0",
    "start-server-and-test": "^2.0.3",
    "typescript": "~5.4.0",
    "unplugin-vue-components": "^0.27.0",
    "vite": "^5.2.8",
    "vitest": "^1.4.0",
    "vue-tsc": "^2.0.11"
  },
  "packageManager": "yarn@4.5.0"
}

Steps to reproduce

Installing the newest extension version (2.1.6) breaks the coloration of the components and they are shown like normal html tags in the template. Rolling back to version 1.8.27 fixes the issue.

I am connecting to a remote sandboxed server via the remote-ssh extension.

No related errors in the vscode developer tools nor on the output channel for the extension.

What is expected?

I am expecting the newest version to work as expected, recognizing the components and adding a different color from the other html tags. (when hovering, components are indeed recognized and their definition is shown, but the coloration is not applied)

What is actually happening?

Updating to the newest version or any version 2+ breaks the coloration of vue components (but still recognizes them)

Link to minimal reproduction

No response

Any additional comments?

I have tried deleting cache on both the remote server and locally tried different typescript versions tried uninstalling all extensions and installing only the Vue official extension. (nothing changed) tried rebooting my server

What is interesting, is that opening the same vuejs project on another remote server the same way, did not have the same issue.

I am not sure what could even be causing this issue.

KazariEX commented 2 weeks ago

What theme are you using? By calling the editor.action.inspectTMScopes command on the component name, it can be seen that the semantic token type is correctly emitted, but some themes do not handle it.

aleksandar-radev commented 2 weeks ago

@KazariEX here's an example output from the editor.action.inspectTMScopes command:

I've tried many themes, none making any difference. I am using the default Dark+ theme

RayGuo-ergou commented 2 weeks ago

It seems semantic token is not working, @KazariEX do you know if vscode can turn server capabilities off in someway ( I did not found)? But the vue language server it self should have no issue since you had it work in another server.

Can you also confirm the configuration for both server are the same, e.g. set editor.semanticHighlighting.enabled to false will disable semantic highlighting. Not sure if vscode has other settings may effect it.

aleksandar-radev commented 2 weeks ago

editor.semanticHighlighting.enabled is set to configuredByTheme on both sides.

What is interesting, is that it just broke when using a local repository. The only change I might have done is to change the version of the vue extension back and forth to earlier and newer versions.

uninstalling and installing again doesn't help. settings have not been changed since. I am thinking it might be something cache related, but I have tried deleting it: C:\Users\\AppData\Roaming\Code\CachedData

is there any other related cache that is to be deleted?

KazariEX commented 2 weeks ago

Try setting it to true?

aleksandar-radev commented 2 weeks ago

yes, tried that :/ but, same.

RayGuo-ergou commented 2 weeks ago

uninstalling and installing again doesn't help. settings have not been changed since. I am thinking it might be something cache related, but I have tried deleting it: C:\Users\AppData\Roaming\Code\CachedData

The cache should on server not your window local, and I dont really feel it's a cache thing. Based on what you have done, it's really became some kind of mysterious since you mentioned it works in another server and the types are correctly inferred . Two last thing probably worth to try:

remove node_modules and re-install
Try a new project create with vite create see if it has the same issue.

aleksandar-radev commented 2 weeks ago

removing and re-installing node_modules did not help, but I found that it is related to either the packages I am using (the dependencies) or to yarn.

creating a new project did have the colors correctly, then replacing the package.json with the old one that I am currently using caused the issue.

Seems there is a problem with yarn v4+ ? (installing with npm was OK)

I will investigate further and will comment again.

aleksandar-radev commented 2 weeks ago

removing both node_modules and lockfile, and re-installing seems to have solved the issue.(removing either one separately didn't have effect). Works with all npm, yarn 1.22 and yarn v4.

Closing as solved. thanks @RayGuo-ergou @KazariEX

vuejs / language-tools