Interactive Diagnostics

Problem

JS and TS diagnostic messages can get quite large, especially when dealing with frameworks like Vue or react. The TS team has worked to significantly improve and shorten diagnostic messages, including replacing complex type information with ..., however there are still cases where you need to see the full type information. Right now, we have to staticly choose to expand the additional information or not. They would like the user to be able to interactively expand types within a diagnostic

In addition, the overall diagnostic experience could be improved. Two areas identified talking with the TS team:

• Syntax coloring of inline code in diagnostics
• Go to definition in diagnostics

Refs

#11847

Desired User Experience

Consider a diagnostic message T<...>. We would like the ... to be something like a link. Clicking it would expand the diagnostic message to T<Array<...>>, which itself contains another expandable link

Requirements

The main focus is on being able dynamically to expand sections of a diagnostic. We need new VS Code API support for this and then will need languages to adopt this API. However, I think the other two features should be considered while designing the new diagnostics API as they are likely something we would like to support and will influence overall api design

For expansion, we want to be able to:

• Mark arbitrary spans within a diagnostics as expandable
• Lazily compute these expansions, i.e. don’t resolve the expansions ahead of time
• Allow expansions to contain other expansions
• Show a progress indicator of some kind while an expansion is being resolved

Many of these features also make sense for quick info hovers

[Arlen22]

Problem solved!

noErrorTruncation: true

At some point someone pointed out the TypeScript tsconfig.json setting compilerOptions.noErrorTruncation. This in fact seems to solve the problem.

[taxilian]

This is a really annoying issue; honestly there is never a time when I don’t want to see the whole thing. Optimize for readability? How is it readable to only see a small part of the relevant information?

Would really really like to see this become a setting that was easy to tweak 😦 it would save me a lot of time right now with what I’m working on