morgankrey
6daa541e77
## Summary
Comprehensive remediation of 146 documentation files to align with Zed's
documentation conventions and brand voice guidelines.
## Changes
### YAML Frontmatter
- Added `title` and `description` frontmatter to all docs missing it
### Settings UI Pattern
- Updated 48+ files to show Settings Editor before JSON examples
- Pattern: `Configure X in Settings ({#kb zed::OpenSettings}), or add to
your settings file:`
- Added `([how to edit](./configuring-zed.md#settings-files))` links for
JSON-only settings
### Brand Voice Fixes
- Removed exclamation points (command-palette, key-bindings, repl,
privacy-and-security, etc.)
- Simplified em dash chains to parentheticals (environment,
troubleshooting, agent-panel, etc.)
- Fixed marketing language (yarn.md intro, development/linux.md)
### Terminology Alignment
- `settings UI` -> `Settings Editor`
- `sidebar` -> specific panel names (Project Panel, Collab Panel)
- `directory` -> `folder` in non-technical contexts
- `workspace` -> `project` in non-LSP contexts
- `Command Palette` -> `command palette` (lowercase)
### Callout Standardization
- Converted various callout formats to standard `> **Note:**` pattern
## Related
Depends on conventions established in #49176.
Release Notes:
- N/A
1.9 KiB
1.9 KiB
title, description
| title | description |
|---|---|
| Vue | Configure Vue language support in Zed, including language servers, formatting, and debugging. |
Vue
Vue support is available through the Vue extension.
- Tree-sitter: tree-sitter-grammars/tree-sitter-vue
- Language Server: vuejs/language-tools/
Using the Tailwind CSS Language Server with Vue
To get all the features (autocomplete, linting, etc.) from the Tailwind CSS language server in Vue files, you need to configure the language server so that it knows about where to look for CSS classes by adding the following to your settings.json:
{
"lsp": {
"tailwindcss-language-server": {
"settings": {
"includeLanguages": {
"vue": "html"
},
"experimental": {
"classRegex": [
"class=\"([^\"]*)\"",
"class='([^']*)'",
":class=\"([^\"]*)\"",
":class='([^']*)'"
]
}
}
}
}
}
With these settings, you will get completions for Tailwind CSS classes in Vue template files. Examples:
<template>
<!-- Static class attribute -->
<div class="flex items-center <completion here>">
<p class="text-lg font-bold <completion here>">Hello World</p>
</div>
<!-- Dynamic class binding -->
<div
:class="
active ? 'bg-blue-500 <completion here>' : 'bg-gray-200 <completion here>'
"
>
Content
</div>
<!-- Array syntax -->
<div :class="['flex', 'items-center', '<completion here>']">Content</div>
<!-- Object syntax -->
<div
:class="{
'flex <completion here>': isFlex,
'block <completion here>': isBlock,
}"
>
Content
</div>
</template>