mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
docs(installation): add documentation for intellisense on SFC objects (#382)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
@@ -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]
|
||||
|
||||
Reference in New Issue
Block a user