1---
  2title: Svelte
  3description: "Configure Svelte language support in Zed, including language servers, formatting, and debugging."
  4---
  5
  6# Svelte
  7
  8Svelte support is available through the [Svelte extension](https://github.com/zed-extensions/svelte).
  9
 10- Tree-sitter: [tree-sitter-grammars/tree-sitter-svelte](https://github.com/tree-sitter-grammars/tree-sitter-svelte)
 11- Language Server: [sveltejs/language-tools](https://github.com/sveltejs/language-tools)
 12
 13## Extra theme styling configuration
 14
 15You can modify how certain styles, such as directives and modifiers, appear in attributes:
 16
 17```json
 18"syntax": {
 19  // Styling for directives (e.g., `class:foo` or `on:click`) (the `on` or `class` part of the attribute).
 20  "attribute.function": {
 21    "color": "#ff0000"
 22  },
 23  // Styling for modifiers at the end of attributes, e.g. `on:<click|preventDefault|stopPropagation>`
 24  "attribute.special": {
 25    "color": "#00ff00"
 26  }
 27}
 28```
 29
 30## Inlay Hints
 31
 32When inlay hints is enabled in Zed, to make the language server send them back, Zed sets the following initialization options:
 33
 34```json
 35"inlayHints": {
 36  "parameterNames": {
 37    "enabled": "all",
 38    "suppressWhenArgumentMatchesName": false
 39  },
 40  "parameterTypes": {
 41    "enabled": true
 42  },
 43  "variableTypes": {
 44    "enabled": true,
 45    "suppressWhenTypeMatchesName": false
 46  },
 47  "propertyDeclarationTypes": {
 48    "enabled": true
 49  },
 50  "functionLikeReturnTypes": {
 51    "enabled": true
 52  },
 53  "enumMemberValues": {
 54    "enabled": true
 55  }
 56}
 57```
 58
 59To override these settings, use the following:
 60
 61```json [settings]
 62"lsp": {
 63  "svelte-language-server": {
 64    "initialization_options": {
 65      "configuration": {
 66        "typescript": {
 67          // ......
 68        },
 69        "javascript": {
 70          // ......
 71        }
 72      }
 73    }
 74  }
 75}
 76```
 77
 78See [the TypeScript language server `package.json`](https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/package.json) for more information.
 79
 80## Using the Tailwind CSS Language Server with Svelte
 81
 82To get all the features (autocomplete, linting, etc.) from the [Tailwind CSS language server](https://github.com/tailwindlabs/tailwindcss-intellisense/tree/HEAD/packages/tailwindcss-language-server#readme) 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`:
 83
 84```json [settings]
 85{
 86  "lsp": {
 87    "tailwindcss-language-server": {
 88      "settings": {
 89        "includeLanguages": {
 90          "svelte": "html"
 91        },
 92        "experimental": {
 93          "classRegex": [
 94            "class=\"([^\"]*)\"",
 95            "class='([^']*)'",
 96            "class:\\s*([^\\s{]+)",
 97            "\\{\\s*class:\\s*\"([^\"]*)\"",
 98            "\\{\\s*class:\\s*'([^']*)'"
 99          ]
100        }
101      }
102    }
103  }
104}
105```
106
107With these settings, you will get completions for Tailwind CSS classes in Svelte files. Examples:
108
109```svelte
110<!-- Standard class attribute -->
111<div class="flex items-center <completion here>">
112  <p class="text-lg font-bold <completion here>">Hello World</p>
113</div>
114
115<!-- Class directive -->
116<button class:active="bg-blue-500 <completion here>">Click me</button>
117
118<!-- Expression -->
119<div class={active ? "flex <completion here>" : "hidden <completion here>"}>
120  Content
121</div>
122```