Button in vs-code to open a large error as a new file in open a new tab.

[MichaelDimmitt]

Description:
Not sure if I should request this feature in this extension.
Please let me know if it should be posted in a different extension repository.

Describe the bug
When you hover to see a typescript error the content can be to large to view in the tooltip.

I understand there is a button that sends you here: https://ts-error-translator.vercel.app/ - however, that also cuts off the two types that that I want to visually compare to troubleshoot the error.

Expected behavior
Clicking a button from the tooltip, outputs the error in a new vs-code tab.

Original error
If this bug is related to an error that is not formatting well, please
attach the original error in a code block:

Screenshots

If there is interest for this and if it is possible.
I might try to put up a pr solving this.

Thank you, this extension is definitely helpful overall.

Regards,
Michael Dimmitt

ps. to make the example in the screenshot I added this to my typescript file: "noErrorTruncation": true,

[kevinramharak]

@MichaelDimmitt I think you are looking for the noErrorTruncation option in the tsconfig.json.
The truncated error message is because that's what the typescript compiler generates as a diagnostic.

[MichaelDimmitt]

1. I am looking for a button to open the error in a different tab. Because the tooltip that shows in vscode is too small to easily debug a large typescript error. @kevinramharak
2. I did not mean to mark it as a bug, I think this would be better marked as a feature.
3. If there is a shortcut or button to do this already I have not heard of it.

[kevinramharak]

@MichaelDimmitt Apologies, i did not see your PS. I tried to reproduce it and ran into the truncation problem and assumed that was the case here.
This would indeed be a feature request. I think this could be implemented with the virtual documents API. The button could open a file in a new tab with a custom file scheme like pretty-ts-errors:, which the provider would then provide the document content formatted as markdown.

[kevinramharak]

I have a 99% working implementation with the markdown code block syntax highlighting still missing:

Which opens the rendered markdown in a new tab:

But I'm struggling with getting the syntax highlighting in the rendered markdown for the custom embedded type.tmGrammar.json.

These instructions are supposed to help:

• https://github.com/mjbvz/vscode-fenced-code-block-grammar-injection-example
• Highlighting of fenced code in markdown for known but non-default languages microsoft/vscode#71888
• https://stackoverflow.com/questions/75903579/how-to-add-custom-language-syntax-highlighter-to-markdown-code-block-in-vscode

But I haven't figured it out yet. There icons that link to external sites to help explain the error are also missing, but the rest seems promising.

I'll try to make a full PR somewhere next week.

[yoavbls]

@kevinramharak It looks very promising!
I tried to make a side panel with markdown a few months ago, but I faced some limitations.
Another option is to create a web side panel and use shiki for syntax highlighting like this plugin is doing:

https://github.com/mattbierner/vscode-docs-view/blob/master/src/codeHighlighter.ts

If you can share the partial PR with me I'll try to help :)

[kevinramharak]

@yoavbls I did look into the Webview API but since it recommends first looking into the native API's I decided to try that first.
My MVP branch is located here: https://github.com/kevinramharak/pretty-ts-errors/tree/feature/107-button-to-open-error-in-new-tab.
It creates a link with a Command URI to invoke the markdown.showPreview command with an URI as argumented like: pretty-ts-errors:${uri.fsPath}.md?range=1:1-2:16
The range parameter represents a Range instance.
The textDocumentContentProvider registers itself to respond to the pretty-ts-errors: scheme and based on the fsPath and Range data it uses the uriStore to lookup the formatted markdown and returns it as the file contents.

[yoavbls]

Looking good
So the only thing left for a working side panel is to render the types with syntax highlighting in the markdown panel?