Colour coded error messages

[vdawg-git]

Suggestion

Typescript error messages can be a bit verbose sometimes. Color coding them and formatting them better (in reference to #45896) would greatly improve their readabillity.

🔍 Search Terms

Colour code, color code, syntax highlighting, formatter, error messages

✅ Viability Checklist

My suggestion meets these guidelines:

• [X] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [X] This wouldn't change the runtime behaviour of existing JavaScript code
• [X] This could be implemented without emitting different JS based on the types of the expressions
• [X] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• [X] This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

A plus: Colour coded visual difference for type errors, for example when unions do not match or a required property is missing.

📃 Motivating Example

Images speak a thousand lines of code (I messed up the formatting a bit. I did this by hand in an online tool..)

💻 Use Cases

Overall useful as current error messages are hard to read, especially with big complex types.

[orta]

A small types highlighter is something I've been thinking about for the twoslash hovers in the site ( https://github.com/shikijs/twoslash/pull/159 ) which could perhaps feed two birds with one feeder.

[vdawg-git]

Any updates on this? Especially when working with a lot of generics or simply complex types, the error messages are very hard to read and this change would help a lot

[vdawg-git]

This VS Code plugin came to rescue: https://github.com/yoavbls/pretty-ts-errors?tab=readme-ov-file