{"id":13457565,"url":"https://github.com/yoavbls/pretty-ts-errors","last_synced_at":"2025-05-06T01:55:39.847Z","repository":{"id":152777055,"uuid":"530861050","full_name":"yoavbls/pretty-ts-errors","owner":"yoavbls","description":"🔵 Make TypeScript errors prettier and human-readable in VSCode 🎀","archived":false,"fork":false,"pushed_at":"2025-02-12T11:07:45.000Z","size":4582,"stargazers_count":13807,"open_issues_count":27,"forks_count":92,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-05-06T01:55:35.131Z","etag":null,"topics":["astro","deno","errors","svelte","typescript","vscode","vscode-extension","vue"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yoavbls.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["yoavbls","johnsoncodehk"]}},"created_at":"2022-08-30T23:01:50.000Z","updated_at":"2025-05-05T08:56:11.000Z","dependencies_parsed_at":"2024-01-05T17:26:28.728Z","dependency_job_id":"21e76844-563d-4fce-aff2-84561a6face6","html_url":"https://github.com/yoavbls/pretty-ts-errors","commit_stats":{"total_commits":82,"total_committers":14,"mean_commits":5.857142857142857,"dds":"0.35365853658536583","last_synced_commit":"18647c1a58fbbef86e3bdbeecfccac11bbe5c9c8"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoavbls%2Fpretty-ts-errors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoavbls%2Fpretty-ts-errors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoavbls%2Fpretty-ts-errors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoavbls%2Fpretty-ts-errors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoavbls","download_url":"https://codeload.github.com/yoavbls/pretty-ts-errors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252606930,"owners_count":21775413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","deno","errors","svelte","typescript","vscode","vscode-extension","vue"],"created_at":"2024-07-31T09:00:29.835Z","updated_at":"2025-05-06T01:55:39.812Z","avatar_url":"https://github.com/yoavbls.png","language":"TypeScript","readme":"\u003ca href=\"https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors\" style=\"display: none;\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/main/assets/icon.png\" width=\"140\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/main/assets/icon.png\" width=\"140\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/main/assets/empty.png\" alt=\"Logo\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n# Pretty `TypeScript` Errors\n\n\u003cb\u003eMake TypeScript errors prettier and human-readable in VSCode.\u003c/b\u003e\n\n[![GitHub stars](https://img.shields.io/github/stars/yoavbls/pretty-ts-errors.svg?style=social\u0026label=Star)](https://GitHub.com/yoavbls/pretty-ts-errors/stargazers/)\n[![Visual Studio Code](https://img.shields.io/badge/--007ACC?logo=visual%20studio%20code\u0026logoColor=ffffff)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)\u0026nbsp;[![GitHub license](https://badgen.net/github/license/yoavbls/pretty-ts-errors)](https://github.com/yoavbls/pretty-ts-errors/blob/main/LICENSE)\u0026nbsp;[![Visual Studio Code](https://img.shields.io/visual-studio-marketplace/i/yoavbls.pretty-ts-errors)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)\n\u003ca href=\"https://github.com/yoavbls/pretty-ts-errors/discussions/43#user-content-jetbrains-support\"\u003e\u003cimg src=\"https://cdn.icon-icons.com/icons2/2530/PNG/512/jetbrains_webstorm_button_icon_151873.png\" height=\"20\" alt=\"Webstorm logo\"\u003e\u003c/a\u003e\n\nTypeScript errors become messier as the complexity of types increases. At some point, TypeScript will throw on you a shitty heap of parentheses and `\"...\"`.  \nThis extension will help you understand what's going on. For example, in this relatively simple error:\n\n\u003cimg src=\"./assets/this.png\" width=\"340.438px\" /\u003e\u0026nbsp; \u0026nbsp; \u003cimg src=\"./assets/instead-of-that.png\" width=\"350px\" /\u003e\n\n## Watch this\n\n\u003ca href=\"https://www.youtube.com/watch?v=9RM2aErJs-s\" target=\"_blank\"\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-video.png\" alt=\"Watch theo's video\" width=\"600\" /\u003e\n\u003c/a\u003e\n\nand others from:\n[Web Dev Simplified](https://www.youtube.com/watch?v=ccg-erZYO4k\u0026list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR\u0026index=1),\n[Josh tried coding](https://www.youtube.com/watch?v=_9y29Cyo9uU\u0026list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR\u0026index=3),\n[trash dev](https://www.youtube.com/watch?v=WJeD3DKlWT4\u0026list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR\u0026index=4\u0026t=208),\nand [more](https://www.youtube.com/playlist?list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR)\n\n## Features\n\n- Syntax highlighting with your theme colors for types in error messages, supporting both light and dark themes\n- A button that leads you to the relevant type declaration next to the type in the error message\n- A button that navigates you to the error at [typescript.tv](http://typescript.tv), where you can find a detailed explanation, sometimes with a video\n- A button that navigates you to [ts-error-translator](https://ts-error-translator.vercel.app/), where you can read the error in plain English\n\n## Supports\n\n- Node and Deno TypeScript error reporters (in `.ts` files)\n- JSDoc type errors (in `.js` and `.jsx` files)\n- React, Solid and Qwik errors (in `.tsx` and `.mdx` files)\n- Astro, Svelte and Vue files when TypeScript is enabled (in `.astro`, `.svelte` and `.vue` files)\n- Ember and Glimmer TypeScript errors and template issues reported by Glint (in `.hbs`, `.gjs`, and `.gts` files)\n\n## Installation\n\n```\ncode --install-extension yoavbls.pretty-ts-errors\n```\n\nOr simply by searching for `pretty-ts-errors` in the [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)\n\n#### How to hide the original errors and make the types copyable\n\nFollow the instructions [there](./docs/hide-original-errors.md). unfortunately, this hack is required because of VSCode limitations.\n\n## Why isn't it trivial\n\n1. TypeScript errors contain types that are not valid in TypeScript.  \n   Yes, these types include things like `... more ...`, `{ ... }`, etc in an inconsistent manner. Some are also cutting in the middle because they're too long.\n2. Types can't be syntax highlighted in code blocks because the part of `type X = ...` is missing, so I needed to create a new TextMate grammar, a superset of TypeScript grammar called `type`.\n3. VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.  \n   \u003cimg src=\"./assets/errors-hover.png\" width=\"600\" /\u003e\n\n## Hype section\n\n\u003ca href=\"https://www.youtube.com/live/Zze1y2iZ3bQ?si=Yj1Qw2S8FbGbTA5c\u0026t=11589\"\u003e\n  \u003cpicture\u003e\n    \u003cimg width=\"400\" src=\"https://github.com/yoavbls/pretty-ts-errors/blob/assets/assets/mentions/js-nation.png?raw=true\" alt=\"Winning the Productivity Booster category at JSNation 2023\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/tannerlinsley/status/1647982562026090496\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-dark.png#gh-light-mode-only\"\u003e\n     \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-light.png#gh-light-mode-only\"\u003e\n    \u003cimg width=\"400\" src=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-dark.png#gh-dark-mode-only\" alt=\"Tanner's tweet\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/t3dotgg/status/1647759462709747713\"\u003e\n  \u003cpicture\u003e    \n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-dark.png#gh-dark-mode-only\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-light.png#gh-light-mode-only\"\u003e\n    \u003cimg width=\"400\" src=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-dark.png#gh-dark-mode-only\" alt=\"Theo's tweet\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/johnsoncodehk/status/1646214711204286465\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-dark.png#gh-dark-mode-only\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-light.png#gh-light-mode-only\"\u003e\n    \u003cimg width=\"400\" src=\"https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-dark.png#gh-dark-mode-only\" alt=\"Johnson's tweet\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n### Stars from stars\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/kentcdodds\"\u003e\n          \u003cimg src=\"https://images.weserv.nl/?url=github.com/kentcdodds.png\u0026fit=cover\u0026mask=circle\" width=\"80\"\u003e\u003cbr\u003e\n          Kent C. Dodds  \n        \u003ca/\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/mattpocock\"\u003e\n          \u003cimg src=\"https://images.weserv.nl/?url=github.com/mattpocock.png\u0026fit=cover\u0026mask=circle\" width=\"80\"\u003e\u003cbr\u003e\n          Matt Pocock  \n        \u003ca/\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/katt\"\u003e\n          \u003cimg src=\"https://images.weserv.nl/?url=github.com/katt.png\u0026fit=cover\u0026mask=circle\" width=\"80\"\u003e\u003cbr\u003e\n          Alex / KATT\n        \u003ca/\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/tannerlinsley\"\u003e\n          \u003cimg src=\"https://images.weserv.nl/?url=github.com/tannerlinsley.png\u0026fit=cover\u0026mask=circle\" width=\"80\"\u003e\u003cbr\u003e\n          Tanner Linsley  \n        \u003ca/\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/t3dotgg\"\u003e\n          \u003cimg src=\"https://images.weserv.nl/?url=github.com/t3dotgg.png\u0026fit=cover\u0026mask=circle\" width=\"80\"\u003e\u003cbr\u003e\n          Theo Browne\n        \u003ca/\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Sponsorship\n\nEvery penny will be invested in other contributors to the project, especially ones that work  \non things that I can't be doing myself like adding support to the extension for other IDEs 🫂\n\n## Contribution\n\nHelp by upvoting or commenting on issues we need to be resolved [here](https://github.com/yoavbls/pretty-ts-errors/discussions/43)  \nAny other contribution is welcome. Feel free to open any issue / PR you think.\n","funding_links":["https://github.com/sponsors/yoavbls","https://github.com/sponsors/johnsoncodehk"],"categories":["TypeScript","Error Message","astro","Projects by main language"],"sub_categories":["typescript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoavbls%2Fpretty-ts-errors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoavbls%2Fpretty-ts-errors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoavbls%2Fpretty-ts-errors/lists"}