typescript.md

TypeScript

TypeScript and TSX support are available natively in Zed.

Language servers

By default Zed uses vtsls for TypeScript, TSX and JavaScript files. You can configure the use of typescript-language-server per language in your settings file:

{
  "languages": {
    "TypeScript": {
      "language_servers": ["typescript-language-server", "!vtsls", "..."]
    },
    "TSX": {
      "language_servers": ["typescript-language-server", "!vtsls", "..."]
    },
    "JavaScript": {
      "language_servers": ["typescript-language-server", "!vtsls", "..."]
    }
  }
}

Prettier will also be used for TypeScript files by default. To disable this:

{
  "languages": {
    "TypeScript": {
      "prettier": { "allowed": false },
    },
    //...
  },
}

Large projects

vtsls may run out of memory on very large projects. You can configure this limit by passing the following options to the language server:

{
  "lsp": {
    "vtsls": {
      "initialization_options": {
        // For TypeScript:
        "typescript": { "tsserver": { "maxTsServerMemory": 8092 } },
        // For JavaScript:
        "javascript": { "tsserver": { "maxTsServerMemory": 8092 } }
      }
    }
  }
}

Inlay Hints

Zed sets the following initialization options to make the language server send back inlay hints (when Zed has inlay hints enabled in the settings).

You can override these settings in your configuration file:

"lsp": {
    "$LANGUAGE_SERVER_NAME": {
        "initialization_options": {
            "preferences": {
              "includeInlayParameterNameHints": "all",
              "includeInlayParameterNameHintsWhenArgumentMatchesName": true,
              "includeInlayFunctionParameterTypeHints": true,
              "includeInlayVariableTypeHints": true,
              "includeInlayVariableTypeHintsWhenTypeMatchesName": true,
              "includeInlayPropertyDeclarationTypeHints": true,
              "includeInlayFunctionLikeReturnTypeHints": true,
              "includeInlayEnumMemberValueHints": true,
            }
        }
    }
}

to override these settings.

See typescript-language-server inlayhints documentation for more information.

See also