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,

[MichaelDimmitt]

Here is the Intentionally bad example that can reproduce the issue.

import { z } from "zod";

const fooo = z.object({
  randomVariable: z.literal('new'),
  bar: z.string(),
  baz: z.string(),
  biq: z.object({
    info: z.object({
      example: z.number(),
      crazyType: z.number()
    })
  })
})

const bazz = z.object({
  randomVariable: z.literal('notNew'),
  bar: z.string(),
  baz: z.string(),
  biq: z.object({
    info: z.object({
      example: z.number(),
      crazyType: z.number()
    })
  })
})
interface baz {
  bar: {}
  baz: {}
  biq: {
    info: {
      example: {}
      crazyTypwe: {}
    }
  }
};
const badExample = z.discriminatedUnion('randomVariable', [
  fooo,
  bazz,
])
type argh = typeof<badExample>

export function funExample(a: argh): argh[] {
  return a;
}

[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
• https://github.com/microsoft/vscode/issues/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?

[MichaelDimmitt]

This is great, thank you for sharing that branch. @kevinramharak It is really informative to see how you went about solving this problem!

I will attempt on my end forking what you are working on. New to extensions though so no promises.

Even what you have in that branch would totally work for my purposes However, I understand that this extension cares about the formatting. 🙂

Thanks again.

[MichaelDimmitt]

I was going to sponsor both of you but only an option to sponsor @yoavbls , thanks for your work on this @kevinramharak !

[kevinramharak]

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

@yoavbls A working side panel would require setting up the Webview API. But I assume it is largely the same flow.

@MichaelDimmitt Thanks for your generosity. I have not had the time yet to work on this. I hope to work out the MVP into something mergable this summer.

[yoavbls]

I'm sorry that I still haven't found time for that but I hope I will do soon. I really appreciate your donation @MichaelDimmitt ❤️ @kevinramharak I would like to give it to you, please open your profile for sponsorship 🙏🏼