coc-pretty-ts-errors
npm install coc-pretty-ts-errorsInspired by https://github.com/yoavbls/pretty-ts-errors. This CoC extension is a port of the original extension to work with CoC.
Based on https://github.com/hexh250786313/pretty-ts-errors-markdown.
https://github.com/hexh250786313/coc-pretty-ts-errors/assets/26080416/8fdbf55f-0b4e-4421-b8bf-44d144230355
- Show TypeScript error messages in a more readable format.
- You can choose to use doHover or diagnostic floating window to display error message by option pretty-ts-errors.mode.
- There are two ways to highlight code blocks, one is to use the highlight group PrettyTsErrorType to highlight a single color, and the other is to use ts syntax highlight.
|pretty-ts-errors.codeBlockHighlightType | screenshot | description |
|---|---|---|
|"prettytserr" | | Use highlight group
PrettyTsErrorType to highlight a single color. |
| "typescript" | | Use ts syntax highlight. And for correct syntax highlight it will extra add a
"type Type = " before type definition in code blocks. |
※ Personally, I prefer to use prettytserr to highlight a single color, because it is more readable and does not affect the original code.
Make sure you have coc.nvim and coc-tsserver installed.
And make sure your coc.nvim includes the pr https://github.com/neoclide/coc.nvim/commit/9c079ad79d66d4ede7886cc4094a822352559502 which gives diagnostic floating window highlight.
Then run the following command:
```
:CocInstall coc-pretty-ts-errors
- CocMarkdownCode is for inline code.CocMarkdownLink
- is for file link.PrettyTsErrorType
- is for the code block if you choose prettytserr in pretty-ts-errors.codeBlockHighlightType. PrettyTsErrorType defaults link to CocMarkdownCode.
Click to see the different ways of highlighting
Here are the available configuration options for coc-pretty-ts-errors:
- pretty-ts-errors.enable: (Boolean, default: true) Enable or disable the coc-pretty-ts-errors extension.pretty-ts-errors.showLink
- : (Boolean, default: false) Show ref links in error message.pretty-ts-errors.mode
- : (0 | 1 | 2, default: 1) Display mode of the error message.pretty-ts-errors.codeBlockHighlightType
- : ("prettytserr" | "typescript", default: "prettytserr") The way to highlight code block.pretty-ts-errors.serverName
- : (String, default: "tsserver") The name of the language server. Set it to 'tsserver' if youse coc-tsserver. Otherwise, set it to your customized typescript language server name.pretty-ts-errors.experimental.filterOriginalTsErrors
- : (Boolean, default: false) (Experimental) Filter original (and ugly) ts errors in the diagnostic floating window.
- Q: When to use serverName
- A: Examples:
- When using coc-tsserver , serverName is "tsserver""languageserver"
- When using a customized typescript , you need to modify serverName to the corresponding values, such as typescript-language-server
`serverName
// coc-settings.json
"pretty-ts-errors.serverName": "my-tsserver",
~~~~~~~~~~~~~ Your customized typescript language server name.
"languageserver": {
"my-tsserver": {
~~~~~~~~~~~~~ is from here.
"enable": true,
"command": "typescript-language-server",
"args": ["--stdio"],
...
...other options
}
}
`
- Some common typescript language server names:
- coc-tsserver:
- repository: https://github.com/neoclide/coc-tsserver
- "pretty-ts-errors.serverName": "tsserver", (Default)"pretty-ts-errors.serverName": "xxxxxxxx",
- coc-volar:
- repository: https://github.com/yaegassy/coc-volar
- Options are same as coc-tsserver's ones. (coc-volar actually calls coc-tsserver)
- typescript-language-server:
- repository: https://github.com/typescript-language-server/typescript-language-server
- (It depends on your configuration)"pretty-ts-errors.serverName": "xxxxxxxx",` (It depends on your configuration)
- vtsls:
- repository: https://github.com/yioneko/vtsls
-