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
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
27Zed sets the following initialization options for inlay hints:
28
29```json
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 make the language server send back inlay hints when Zed has them enabled in the settings.
55
56Use
57
58```json
59"lsp": {
60  "svelte-language-server": {
61    "initialization_options": {
62      "configuration": {
63        "typescript": {
64          ......
65        },
66        "javascript": {
67          ......
68        }
69      }
70    }
71  }
72}
73```
74
75to override these settings.
76
77See https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/package.json for more information.