Miguel Raz Guzmán Macedo
a2da6d971f
Fixes a batch of grammatical mistakes found across the `docs/` folder: typos/misspellings, subject-verb agreement errors, missing and duplicated words, article errors (`a`/`an`), wrong word forms, and punctuation issues (doubled periods, unclosed parentheses). Scope is limited to prose in `docs/src/**`; no behavior, settings, or code changes. 33 files updated, 49 lines changed. Representative fixes: - `globs.md`: "features varies" -> "features"; "platforms libc" -> "platform's libc". - `installation.md`: "the follow macOS releases" -> "the following macOS releases". - `key-bindings.md`: "command pallets" -> "command palette's". - `linux.md`: capitalization after a period; "able to the environment variable" -> "able to set the environment variable"; "These feature also requires" -> "This feature also requires". - `multibuffers.md`: "Window/Linux" -> "Windows/Linux"; added a missing closing parenthesis. - `reference/all-settings.md`: several agreement/article/missing-word fixes plus an unclosed parenthesis. - `languages/*`: "partent" -> "parent", "complimentary" -> "complementary", "setup" -> "set up", "is enabled" -> "are enabled", and similar. Release Notes: - N/A
3.2 KiB
3.2 KiB
title, description
| title | description |
|---|---|
| Svelte | Configure Svelte language support in Zed, including language servers, formatting, and debugging. |
Svelte
Svelte support is available through the Svelte extension.
- Tree-sitter: tree-sitter-grammars/tree-sitter-svelte
- Language Server: sveltejs/language-tools
Extra theme styling configuration
You can modify how certain styles, such as directives and modifiers, appear in attributes:
"syntax": {
// Styling for directives (e.g., `class:foo` or `on:click`) (the `on` or `class` part of the attribute).
"attribute.function": {
"color": "#ff0000"
},
// Styling for modifiers at the end of attributes, e.g. `on:<click|preventDefault|stopPropagation>`
"attribute.special": {
"color": "#00ff00"
}
}
Inlay Hints
When inlay hints are enabled in Zed, to make the language server send them back, Zed sets the following initialization options:
"inlayHints": {
"parameterNames": {
"enabled": "all",
"suppressWhenArgumentMatchesName": false
},
"parameterTypes": {
"enabled": true
},
"variableTypes": {
"enabled": true,
"suppressWhenTypeMatchesName": false
},
"propertyDeclarationTypes": {
"enabled": true
},
"functionLikeReturnTypes": {
"enabled": true
},
"enumMemberValues": {
"enabled": true
}
}
To override these settings, use the following:
"lsp": {
"svelte-language-server": {
"initialization_options": {
"configuration": {
"typescript": {
// ......
},
"javascript": {
// ......
}
}
}
}
}
See the TypeScript language server package.json for more information.
Using the Tailwind CSS Language Server with Svelte
To get all the features (autocomplete, linting, etc.) from the Tailwind CSS language server in Svelte 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": {
"svelte": "html"
},
"experimental": {
"classRegex": [
"class=\"([^\"]*)\"",
"class='([^']*)'",
"class:\\s*([^\\s{]+)",
"\\{\\s*class:\\s*\"([^\"]*)\"",
"\\{\\s*class:\\s*'([^']*)'"
]
}
}
}
}
}
With these settings, you will get completions for Tailwind CSS classes in Svelte files. Examples:
<!-- Standard class attribute -->
<div class="flex items-center <completion here>">
<p class="text-lg font-bold <completion here>">Hello World</p>
</div>
<!-- Class directive -->
<button class:active="bg-blue-500 <completion here>">Click me</button>
<!-- Expression -->
<div class={active ? "flex <completion here>" : "hidden <completion here>"}>
Content
</div>