Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hexh250786313/coc-pretty-ts-errors
A coc.nvim extension for displaying pretty ts diagnostic info.
https://github.com/hexh250786313/coc-pretty-ts-errors
Last synced: 4 days ago
JSON representation
A coc.nvim extension for displaying pretty ts diagnostic info.
- Host: GitHub
- URL: https://github.com/hexh250786313/coc-pretty-ts-errors
- Owner: hexh250786313
- License: mit
- Created: 2024-01-30T14:28:12.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-05-22T15:12:33.000Z (6 months ago)
- Last Synced: 2024-05-22T16:12:32.716Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 5.4 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# coc-pretty-ts-errors
Inspired 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
## Features
- 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.
## Usage
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
```
## Highlight Group
- `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
## Configuration
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 & A
- **Q: When to use `serverName`**
- **A**: Examples:
- When using [coc-tsserver](https://github.com/neoclide/coc-tsserver) , `serverName` is `"tsserver"`
- When using a customized typescript `"languageserver"`, you need to modify `serverName` to the corresponding values, such as [typescript-language-server](https://github.com/typescript-language-server/typescript-language-server)
```
// coc-settings.json
"pretty-ts-errors.serverName": "my-tsserver",
~~~~~~~~~~~~~ Your customized typescript language server name.
"languageserver": {
"my-tsserver": {
~~~~~~~~~~~~~ `serverName` 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)
- 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
- `"pretty-ts-errors.serverName": "xxxxxxxx",` (It depends on your configuration)
- vtsls:
- repository: https://github.com/yioneko/vtsls
- `"pretty-ts-errors.serverName": "xxxxxxxx",` (It depends on your configuration)
- **Q: The plugin is not working after executing `:CocCommand tsserver.restart`**
- **A**: The plugin cannot listen to the `restart` event of the client, which causes it to fail to re-listen to the `onDidDiagnosticsChange` of the new client instance, so it cannot automatically restore the plugin function. The solution is to restart nvim/vim or manually execute `:CocRestart`.