1# Svelte
 2
 3Svelte support is available through the [Svelte extension](https://github.com/zed-extensions/svelte).
 4
 5- Tree-sitter: [tree-sitter-grammars/tree-sitter-svelte](https://github.com/tree-sitter-grammars/tree-sitter-svelte)
 6- Language Server: [sveltejs/language-tools](https://github.com/sveltejs/language-tools)
 7
 8## Extra theme styling configuration
 9
10You can modify how certain styles, such as directives and modifiers, appear in attributes:
11
12```json [settings]
13"syntax": {
14  // Styling for directives (e.g., `class:foo` or `on:click`) (the `on` or `class` part of the attribute).
15  "attribute.function": {
16    "color": "#ff0000"
17  },
18  // Styling for modifiers at the end of attributes, e.g. `on:<click|preventDefault|stopPropagation>`
19  "attribute.special": {
20    "color": "#00ff00"
21  }
22}
23```
24
25## Inlay Hints
26
27When inlay hints is enabled in Zed, to make the language server send them back, Zed sets the following initialization options:
28
29```json [settings]
30"inlayHints": {
31  "parameterNames": {
32    "enabled": "all",
33    "suppressWhenArgumentMatchesName": false
34  },
35  "parameterTypes": {
36    "enabled": true
37  },
38  "variableTypes": {
39    "enabled": true,
40    "suppressWhenTypeMatchesName": false
41  },
42  "propertyDeclarationTypes": {
43    "enabled": true
44  },
45  "functionLikeReturnTypes": {
46    "enabled": true
47  },
48  "enumMemberValues": {
49    "enabled": true
50  }
51}
52```
53
54To override these settings, use the following:
55
56```json [settings]
57"lsp": {
58  "svelte-language-server": {
59    "initialization_options": {
60      "configuration": {
61        "typescript": {
62          // ......
63        },
64        "javascript": {
65          // ......
66        }
67      }
68    }
69  }
70}
71```
72
73See [the TypeScript language server `package.json`](https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/package.json) for more information.