# Implement pretty TypeScript errors \(\#42494\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/4adec27a3d963fe155ea3cf927fab71be317b5a2)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 4adec27a3d963fe155ea3cf927fab71be317b5a2

Requested commit: 4adec27a3d963fe155ea3cf927fab71be317b5a2

Commit: 4adec27a3d963fe155ea3cf927fab71be317b5a2

Tree: 8296a6546ef581e70ff4dd186389ee4cfbfadd19

Author: KyleBarton

Committer: GitHub

## Message

````
Implement pretty TypeScript errors (#42494)

Closes #7844

This change uses tree-sitter highlights as a method of showing
typescript errors prettily, keeping regex as simple as possible:

<img width="832" height="446" alt="Screenshot 2025-11-11 at 3 40 24 PM"
src="https://github.com/user-attachments/assets/0b3b6cf1-4d4d-4398-b89b-ef5ec0df87ec"
/>

It covers three main areas:

1. Diagnostics

Diagnostics are now rendered with language-aware typescript, by
providing the project's language registry.

2. Vtsls

The LSP provider for typescript now implements the
`diagnostic_message_to_markdown` function in the `LspAdapter` trait, so
as to provide Diagnostics with \`\`\`typescript...\`\`\`-style code
blocks for any selection of typescript longer than one word. In the
single-word case, it simply wraps with \`\`

3. Typescript's `highlights.scm`

`vtsls` doesn't provide strictly valid typescript in much of its
messaging. Rather, it returns a message with snippets of typescript
values which are invalid. Tree-sitter was not properly highlighting
these snippets because it was expecting key-value formats. For instance:
```
type foo = { foo: string; bar: string; baz: number[] }
```
is valid, whereas simply
```
{ foo: string; bar: string; baz: number[] }
```
is not.

Therefore, highlights.scm needed to be adjusted in order to
pattern-match on literal values that might be returned from the vtsls
diagnostics messages. This was done by a) identifying arrow functions on
their own, and b) augmenting the `statment_block` pattern matching in
order to match on values which were clearly object literals.

This approach may not be exhaustive - I'm happy to work on any
additional cases we might identify from `vtsls` here - but hopefully
demonstrates an extensible approach to making these messages look nice,
without taking on the technical burden of extensive regex.

Release Notes:

- Show pretty TypeScript errors with language-aware Markdown.
````

## Parents

- [e8daab15ab06a04aee8e2137ebf4da1e5127901e](https://git.cafe/gitcafe/zed/commit/e8daab15ab06a04aee8e2137ebf4da1e5127901e?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/4adec27a3d963fe155ea3cf927fab71be317b5a2?format=markdown)