Skip to content
TyrnBeta

TypeScript

TypeScript, JavaScript and TSX (React) share the same built-in support.

Feature Provided by
Language server vtsls
Formatting Prettier, when it applies to your project
Debugging The JavaScript debug adapter

Servers written in JavaScript run on Node. Tyrn uses your node if it is recent enough and downloads its own otherwise. See Configuring languages.

Language servers

vtsls is the default. typescript-language-server is also built in. To use it instead:

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

ESLint is available as a language server for these languages, and so is Tailwind CSS. See Tailwind CSS.

Formatting

Prettier is allowed for these languages. It uses the version installed in your project. To turn it off for TypeScript:

settings.json
{
  "languages": {
    "TypeScript": { "prettier": { "allowed": false } }
  }
}

To run ESLint fixes and then Prettier on format:

settings.json
{
  "languages": {
    "TypeScript": {
      "formatter": [{ "code_action": "source.fixAll.eslint" }, "prettier"]
    }
  }
}

Set "format_on_save": "on" to format whenever you save. See Configuring languages.

Large projects

Raise the memory limit of the TypeScript server if it runs out in a big repository:

settings.json
{
  "lsp": {
    "vtsls": {
      "settings": {
        "typescript": { "tsserver": { "maxTsServerMemory": 16384 } },
        "javascript": { "tsserver": { "maxTsServerMemory": 16384 } }
      }
    }
  }
}

Inlay hints

Turn on inlay hints with inlay_hints.enabled, then choose what the server shows. For vtsls:

settings.json
{
  "inlay_hints": { "enabled": true },
  "lsp": {
    "vtsls": {
      "settings": {
        "typescript": {
          "inlayHints": {
            "parameterNames": { "enabled": "all" },
            "parameterTypes": { "enabled": true },
            "variableTypes": { "enabled": true },
            "functionLikeReturnTypes": { "enabled": true }
          }
        }
      }
    }
  }
}

Use the javascript key for JavaScript files. With typescript-language-server, set the includeInlay... preferences under initialization_options.preferences instead.

Code lens

Set "code_lens": "on" to show references and implementation counts above declarations. For vtsls, enable typescript.implementationsCodeLens.enabled in lsp.vtsls.settings.

Debugging

The JavaScript adapter debugs JavaScript and TypeScript, in Node and in the browser. Press f4 and choose a configuration, or add one to .tyrn/debug.json:

.tyrn/debug.json
[
  {
    "label": "Node: current file",
    "adapter": "JavaScript",
    "type": "pwa-node",
    "request": "launch",
    "program": "./index.js"
  }
]

See Debugger.