No IntelliSense for Vuetify CSS classes

sebastianhaberey commented 1 month ago

Vue - Official extension or vue-tsc version

v2.1.6

VSCode version

1.93.1

Vue version

3.4.31

TypeScript version

5.4.2

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 352.48 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.n/bin/node
    Yarn: 1.22.19 - ~/.n/bin/yarn
    npm: 10.8.3 - ~/.n/bin/npm
  Browsers:
    Chrome: 129.0.6668.72
    Safari: 17.6

package.json dependencies

"dependencies": {
    "@mdi/font": "7.4.47",
    "core-js": "^3.37.1",
    "papaparse": "^5.4.1",
    "roboto-fontface": "*",
    "vue": "^3.4.31",
    "vuetify": "^3.6.11"
  },
  "devDependencies": {
    "@babel/types": "^7.24.7",
    "@types/node": "^20.14.10",
    "@types/papaparse": "^5.3.14",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-typescript": "^13.0.0",
    "eslint": "^8.57.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.4.0",
    "eslint-plugin-vue": "^9.27.0",
    "prettier": "^3.3.3",
    "sass": "1.77.6",
    "typescript": "^5.4.2",
    "unplugin-fonts": "^1.1.1",
    "unplugin-vue-components": "^0.27.2",
    "unplugin-vue-router": "^0.10.0",
    "vite": "^5.3.3",
    "vite-plugin-vuetify": "^2.0.3",
    "vitest": "^2.1.1",
    "vue-router": "^4.4.0",
    "vue-tsc": "^2.0.26"
  }

Steps to reproduce

Create Vue SFC
Add HTML tag with class="d-f"

test

What is expected?

Intellisense proposes Vuetify class "d-flex"

What is actually happening?

No proposals are shown.

Link to minimal reproduction

No response

Any additional comments?

This may well be a problem with my setup. Or maybe Vuetify classes aren't part of this project?

RayGuo-ergou commented 1 month ago

~~Can you try to upgrade vuetify and see if it fixes?~~

~~The reason is likely because here: https://github.com/vuetifyjs/vuetify/blob/v3.6.11/packages/vuetify/src/globals.d.ts#L100~~

~~It has to be vue to correctly working with new version of LSP. Vuetify has shipped this fix in V3.7.1 see: https://github.com/vuetifyjs/vuetify/commit/7c8aeefdc097ff9b74a733ed17b6a8cd9e1f8575~~

My bad did not see it's css class, in that case it's not "include" in vue lsp, you probably can find css-lsp (or extension?) and give the path of vuetify css file.

sebastianhaberey commented 1 month ago

I was hoping since Vuetify components etc. are supported, their styles would be supported too. But it makes sense to do this via CSS LSP. I will close this issue and see if I can find something there. Thanks!

vuejs / language-tools