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.

20240704_120525.mp4

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 , serverName is "tsserver"

  • When using a customized typescript "languageserver", you need to modify serverName to the corresponding values, such as 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)