Colour coded error messages

[Visual-Dawg]

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:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behaviour of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• 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 ( shikijs/twoslash#159 ) which could perhaps feed two birds with one feeder.

[Visual-Dawg]

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

[Visual-Dawg]

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