docs(installation): add documentation for intellisense on SFC objects (#382)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
MadDog4533
2023-07-24 11:37:58 -06:00
committed by GitHub
parent d2a8a07a21
commit f005cbb95e

View File

@@ -73,16 +73,35 @@ If you do so, you'll need to add the following to your `.vscode/settings.json`:
}
```
Also, the extension won't work when writing classes in your `app.config.ts` by default. You can add the following to your `.vscode/settings.json` to fix this:
Note, the extension won't work when writing classes in your `app.config.ts` by default.
Also, you might want IntelliSense on objects in your SFC by prefixing with `/*ui*/`.
To enable these two features, you can add the following to your `.vscode/settings.json`:
```json [.vscode/settings.json]
{
"tailwindCSS.experimental.classRegex": [
["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"]
["/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"],
]
}
```
An example SFC using IntelliSense (note the `/*ui*/` prefix, also works with `ref()`):
```vue [example.vue]
<template>
<UCard :ui="ui" />
</template>
<script setup>
const ui = /*ui*/ {
background: 'bg-white dark:bg-slate-900'
}
</script>
```
You can also add the following to your `.vscode/settings.json` to enable IntelliSense when using the `ui` prop:
```json [.vscode/settings.json]