pretty-ts-errors
pretty-ts-errors copied to clipboard
Neovim support
Hi, This plugin is wonderful. Do you have any plans to support Neovim too?
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 Log
[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
is not assignable to type
string
[Trace - 21:58:37.828] Received notification 'textDocument/publishDiagnostics'.
Params: {
// ...snip
}
```
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