Yes please! This plugin on vim/ neovim would be a blessing.

People from the community already saw it and they seem to want it badly:
https://www.reddit.com/r/neovim/comments/12q7atv/pretty_errors_plugin_like_this/

You can use https://www.npmjs.com/package/pretty-ts-errors-lsp for now to build PoC for other IDEs.

@johnsoncodehk May I ask a question? Does pretty-ts-errors-lsp run on hover trigger?

In VSCode plugin it's run on onDidChangeDiagnostics, and then get on hover trigger.

FYI: https://github.com/johnsoncodehk/pretty-ts-errors/blob/dff54f1425721beb0aa534d5a17a0ef7ffecd412/src/extension.ts#L38

I tried it with coc.nvim. Although the appearance is a bit concerning, I confirmed that it works. (It might be a client-side issue)

One thing that concerns me is that when I look at the trace log, it seems like the result is being output as standard output.

[Trace - 21:58:37.812] Sending response 'workspace/configuration - (6)'. Processing request took 1ms
Result: [
    null
]


[Trace - 21:58:37.820] Received response 'textDocument/inlayHint - (3)' in 33ms.
Result: []


<span style="color:#f96363;">⚠ Error</span><span style="color:#5f5f5f;">
(TS2322) 
<a title="See detailed explanation" href="https://typescript.tv/errors/#TS2322">
  <span class="codicon codicon-link-external">
  </span>
</a>  | 
<a title="See translation" href="https://ts-error-translator.vercel.app/?error=CoTwDgpgBA5AdgVwLYCMICcZQJYGcpwD2ALlAIa67YDmcZKANtMYVMeNDLsetnNTAB0QA">
  <span class="codicon codicon-globe">
  </span>
</a>
</span>
<span>

<span>
Type </span>
<span class="codicon codicon-none" style="background-color:var(--vscode-textCodeBlock-background);">

  ```type
   number 

 string 

Could you provide the configuration for using with coc.nvim ? I use the default neovim lsp and I want to port a version

It should be entirely just logic in the language client, I'm not sure why it would affect the LSP trace.

@cherryramatisdev I think johnsoncodehk's tweet would be helpful as a reference.

https://twitter.com/johnsoncodehk/status/1648228278149455872

@yaegassy Are you using @volar-plugins/pretty-ts-errors or building a client plugin based on pretty-ts-errors-lsp?

@johnsoncodehk I tried with @volar-plugins/pretty-ts-errors.

For @volar-plugins/pretty-ts-errors, in VSCode it also needs to set isTrusted and supportHtml in the language client middleware. I'm not sure if coc supports it. https://github.com/volarjs/volar.js/blob/5ae44d90936045b92ad9debcfb9ae952bb311fb8/packages/vscode/src/index.ts#L27-L28

@yaegassy please update @volar-plugins/pretty-ts-errors to 2.0.0-alpha.23-patch.2, it should fixed the logging issue.

@johnsoncodehk I checked that the issue with the log has been resolved!

Just one more thing, please allow me to confirm for the sake of being thorough. This is regarding the Markdown content of the hover response. Is there any additional processing required for "quotes" or anything else?

[Trace - 23:01:20.856] Received response 'textDocument/hover - (14)' in 4ms.
Result: {
    "contents": {
        "kind": "markdown",
        "value": "```typescript\n(property) name: string\n```\n\n---\n\n<span style=\"color:#f96363;\">⚠ Error</span><span style=\"color:#5f5f5f;\">\n(TS2322) \n<a title=\"See detailed explanation\" href=\"https://typescript.tv/errors/#TS2322\">\n  <span class=\"codicon codicon-link-external\">\n  </span>\n</a>  | \n<a title=\"See translation\" href=\"https://ts-error-translator.vercel.app/?error=CoTwDgpgBA5AdgVwLYCMICcZQJYGcpwD2ALlAIa67YDmcZKANtMYVMeNDLsetnNTAB0QA\">\n  <span class=\"codicon codicon-globe\">\n  </span>\n</a>\n</span>\n<span>\n\n<span>\nType </span>\n<span class=\"codicon codicon-none\" style=\"background-color:var(--vscode-textCodeBlock-background);\">\n\n  ```type\n   number \n  ```\n\n</span>\n<span> is not assignable to type </span>\n<span class=\"codicon codicon-none\" style=\"background-color:var(--vscode-textCodeBlock-background);\">\n\n  ```type\n   string \n  ```\n\n</span>\n<span>\n</span>"
    },
    "range": {
        "start": {
            "line": 4,
            "character": 15
        },
        "end": {
            "line": 4,
            "character": 19
        }
    }
}

I tried it on VSCode, but since the response was the same, I assume the issue is on the client side that I'm using. I resolved it myself. 🙇

Bump. Would love this in NeoVim 🙏🏻

I started the migration to a monorepo and now I'm exporting a formatting function that can be customizable. I would be happy to test it and try to make it work with Neovim.
Are you willing to help via Discord? @yaegassy @cherryramatisdev

Don't know if you still need help with this @yoavbls but I'm available!

Hi @yoavbls. Do you have any thoughts or advice on how a neovim plugin should be structured?

I briefly experimented trying to create one a few months back, but wasn't sure how to nicely render the final text produced by pretty-ts-errors. Do you think it's feasible to have pretty-ts-errors output in a markdown format? Then we can easily render it in neovim (or any other editor that supports markdown) with all that markdown has to offer (syntax highlighting, concealed hyperlinks, etc)

This issue inspired me to build https://github.com/piersolenski/wtf.nvim - which uses the power of AI to both better explain Typescript errors and give you custom tailored solutions. The best part is it actually works with any language with LSP support, and any level of diagnostic message. For those who don't want to use AI, it also allows you to open a search for diagnostic messages in your favourite resources such as Google, Stack Overflow, Github Issues etc - and I plan to support other sources soon!

Bump!

How do we go about adding this to volar with lsp-config?

        volar = {
          filetypes = { 'javascript', 'typescript', 'vue' }, -- enable takeover mode for js files - https://github.com/johnsoncodehk/volar/discussions/471
        },

I'm still looking for some help here.
Is most of the TypeScript developers in Neovim is working with coc-volar of @yaegassy?
If so I'll just work on creating an official service and guide for volar.js

I suspect that most TS devs using neovim are using the built-in LSP with typescript.nvim or typescript-tools.nvim, but I don't know for sure.

I'm still looking for some help here. Is most of the TypeScript developers in Neovim is working with coc-volar of @yaegassy? If so I'll just work on creating an official service and guide for volar.js

maybe most of user just use tsserver with built-in lsp

Personally, I'm using COC atm. Want to refactor my setup but that's besides the point.

Personally, I'm using COC atm. Want to refactor my setup but that's besides the point.

if you want, you can copy my config here: https://github.com/nfwyst/perfect-neovim-config/blob/main/lua/plugins/lsp/config.lua, im using lazy.nvim, its very fast!

if you want, you can copy my config

I like the structure. I'll probably take some inspiration from this! Thanks!

Hey,
I am actually attempting to achieve similar results in Neovim with my home-made-home-baked plugin here.
It's not on par features wise with this yet, and does not use the same LSP under the hood, because error message formatted into html is no of good use to us, neovim plebs, but it attempts to manually parse some stuff.
So, feel free to give it a go, if you want.
https://github.com/OlegGulevskyy/better-ts-errors.nvim

+1, I hope this comes to something like LazyVim, I didn't get anything from above working yet

I have been using this is vs code before moving to neovim and I dearly miss it would love this to come to neovim and I will be glad to help

@yaegassy Hi! I tried pretty-ts-errors-lsp in coc-tsserver and got the HTML response. I think the key factor to let it work with coc.nvim is how to make the formatted HTML code show correctly in the diagnostics panel. I have tried some HTML-to-MD packages like turndown, but they are not ideal.

Could you please give me some suggestions?

Edit1. I just found out that coc.nvim's markdown parsing supports displaying HTML content. Maybe just some simple tweaks are needed to correctly show the diagnostics in coc-tsserver.

https://github.com/hexh250786313/pretty-ts-errors-markdown

I created a package based on pretty-ts-errors that converts the HTML output of pretty-ts-errors into markdown. Additionally, I added CLI functionality that can accept standard input from the command line. I hope this package will simplify the process of integrating pretty-ts-errors support for neovim or other IDEs capable of rendering markdown format.

Moreover, for coc.nvim users, I have created an extension based on the aforementioned pretty-ts-errors-markdown. As I mentioned, it relies on markdown rendering, which, while not as perfect as HTML rendering, is sufficient.

https://github.com/hexh250786313/coc-pretty-ts-errors

Click to see the preview

20240704_120525.mp4

I created a package based on pretty-ts-errors that converts the HTML output of pretty-ts-errors into markdown.

Have you on purpose disabled issues in your project? I would like to make a suggestion there (to expose helper function to convert just the message).

@rchl My mistake, you can now raise an issue. Thank you for your feedback.

+1; really need this on Noevim

I'm not sure if it's mentioned but ts-error-translator.nvim plugin written by @dmmulroy works pretty good.