Hide Unformatted TypeScript errors / move to after the pretty errors

[robertmoura]

Really loving the format of these errors! It's a lot easier to read.

The only thing I noticed is that the unformatted errors are still showing up. Was this intended or is there a way to remove them?

Update / TLDR

This is currently intentional but there are plans to improve the experience. This could potentially be improved by:

• Removing the original error
• Changing the order of the errors so that the pretty version is on top

The issue is that the improvements rely on changes to VS Code. Go upvote this issue if you want these changes!

@yoavbls wrote:

This is the issue that will eventually allow us to modify the order of the errors + mute the original error:
microsoft/vscode#54272

[Samathingamajig]

this is intended.

pretty-ts-errors/README.md

Line 38 in d055b01

3. VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.

VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.

[seahindeniz]

Hmm. Well, if it's possible, having an option to disable them is much preferred than having a bunch of similar errors in a scrollable small container. For the copy-pasting issue, I believe the error translation feature and also the built-in Problems panel should be enough, since it shows the raw version of the error.

[robertmoura]

I agree! Would be great to have an option to disable them. Personally I never copy these errors anyway.

[Samathingamajig]

at most, i copy the error number, in this case ts(6196) or just 6196 and type ts in the search bar

[yoavbls]

@robertmoura Thank you for opening this issue 💁🏼‍♀️
As @Samathingamajig said, it is intended, but I planned to add an option to choose whether you want to see TypeScript original errors after I'll succeed in making the types copyable.
Unfortunately, I failed to find a hack due to the strict limitations there:
https://github.com/microsoft/vscode/blob/b0d7acec38cfab4d82630cba64d581bf1cd1a305/src/vs/base/browser/markdownRenderer.ts#L372

So, I'll explore adding a setting that will hide TypeScript's original errors very soon.
Until then, if someone want to open a PR for that, you're more than welcome 🙂

[Samathingamajig]

Are extensions able to silence the errors of another extension?

[tjx666]

@mjbvz @johnsoncodehk

[yoavbls]

@Samathingamajig Actually I didn't find any API of VSCode that allows that.
Does someone have an idea how we can remove the original TypeScript diagnostics?

Maybe we should address it with a language service plugin like this guy did here?
@johnsoncodehk @Samathingamajig @tjx666
WDYT?

[Samathingamajig]

Maybe we should address it with a language service plugin like this guy did here?
@Samathingamajig WDYT?

Personally, I don't think it's worth it to try to silence the original error. Since formatting restricts the ability to copy/paste the error with the customize one, you get the benefit of being able to easily copy the raw error without going to the error panel. I would imagine silencing the error with a language service plugin would also remove the error from the error panel, as well as hiding it from your extension (unless your extension relies on a separate language server, which I doubt).

[nicooprat]

At least it would be cool to have the pretty error first in the tooltip 🤞

[yoavbls]

It was the first on the tooltip a while ago, I'm not sure why it changed.
@johnsoncodehk has some breakthroughs there by moving the error-providing mechanism to the language service plugin.
It'll allow us to control the order and hide the original errors.

We'll update about it soon 🙏🏼

[johnsoncodehk]

Just to clarify...don't expect it, the language server can cut the original error message, but this will also cause extensions like ErrorLens that rely on diagnostic messages to not work, so I don't think that's the way forward. Still need see VSCode how to improve.

In addition, the language server can only control the order of hover messages, but cannot make the hover messages displayed on top of the diagnosis.

Sorry for the false hopes.

[corysimmons]

Can someone just link to a VSCode repo Issue where we can 👍 some "Let us tweak this" issue?

[estubmo]

Maybe we should address it with a language service plugin like this guy did here?
@Samathingamajig WDYT?

Personally, I don't think it's worth it to try to silence the original error. Since formatting restricts the ability to copy/paste the error with the customize one, you get the benefit of being able to easily copy the raw error without going to the error panel. I would imagine silencing the error with a language service plugin would also remove the error from the error panel, as well as hiding it from your extension (unless your extension relies on a separate language server, which I doubt).

A good solution for that would be to hide the original error, but add a button for copying it all to the clipboard.

[Samathingamajig]

A good solution for that would be to hide the original error, but add a button for copying it all to the clipboard.

read the last sentence

[Samathingamajig]

@RoyiNamir It could be made more prominent, however, it is mentioned on the main screen of the extension.

pretty-ts-errors/README.md

Line 38 in d055b01

3. VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.

VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.

(emphasis mine)

[daaanny90]

@RoyiNamir A bit rude but I was expecting also only the beautified error. That's why I found this issue.

[yoavbls]

This is the issue that will eventually allow us to modify the order of the errors + mute the original error:
microsoft/vscode#54272

Every vote or comment could help!

@robertmoura Can you add it to the content of the issue please? 🙏🏼

[blasco]

This would be great, voting 👍

[scottybrown]

If this is expected behaviour, perhaps the README.md could be updated to better explain how it works.

This extension doesn't give you "this" "instead of that". It gives you both, and the ugly "that" gets priority. The only way to find out it's meant to work that way is to browse the issues :)

[oscklm]

I can confirm that the original "ugly" typescript errors in fact do appear over the "pretty" ones for me as well, feels like they were on top before, so might be as of lately that pretty ones appear below, sadly. For long error messages, this quickly makes the extension near useless, as scrolling the tiny little problems window is far from easy.

I would agree that the README should be updated to more accurately show how the errors will be displayed.

Hope that VSCode will allow for a way to work around this. It's sad, since the extension is def one of my favourites 🙏🏽

[yoavbls]

Until things will be changed, you can use this hack here:
https://github.com/yoavbls/pretty-ts-errors/blob/main/docs/hide-original-errors.md

[Unique-Pixels]

Hmm, I am able to copy from the prettified text. macOS.

[yoavbls]

Hmm, I am able to copy from the prettified text. macOS.

I'm curious how. Are you able to copy just texts or also colored code blocks?

[Unique-Pixels]

I'm curious how. Are you able to copy just texts or also colored code blocks?

Ahh, now I see the issue! It does seem that at least one of the supporting issues has been upvoted enough, but even though that occurred does not seem like it is getting done, which is shame.