pretty-ts-errors README

The project's README from github.com/yoavbls/pretty-ts-errors. As one markdown file: README.md.

Logo

Pretty TypeScript Errors

Make TypeScript errors prettier and human-readable in VSCode.

GitHub stars Visual Studio Code GitHub license Visual Studio Code Webstorm logo Cursor

TypeScript errors become messier as the complexity of types increases. At some point, TypeScript will throw on you a shitty heap of parentheses and "...". This extension will help you understand what's going on. For example, in this relatively simple error:

   

Watch this

Watch theo's video

and others from: Web Dev Simplified, Josh tried coding, trash dev, and more

Features

Supports

Installation

code --install-extension yoavbls.pretty-ts-errors

Or simply by searching for pretty-ts-errors in the VSCode marketplace

How to hide the original errors and make the types copyable

Follow the instructions there. unfortunately, this hack is required because of VSCode limitations.

Why isn't it trivial

  1. TypeScript errors contain types that are not valid in TypeScript. Yes, these types include things like ... more ..., { ... }, etc in an inconsistent manner. Some are also cutting in the middle because they're too long.
  2. 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.
  3. 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.

Hype section

Winning the Productivity Booster category at JSNation 2023 Tanner's tweet Theo's tweet Johnson's tweet

Stars from stars


Kent C. Dodds

Matt Pocock

Alex / KATT

Tanner Linsley

Theo Browne

Sponsorship

Every penny will be invested in other contributors to the project, especially ones that work on things that I can't be doing myself like adding support to the extension for other IDEs 🫂

Contribution

Help by upvoting or commenting on issues we need to be resolved here Any other contribution is welcome. Feel free to open any issue / PR you think.

pretty-ts-errors (yoavbls/pretty-ts-errors)

Searching Database…

Что это такое?Расширение для VSCode, которое превращает часто нечитаемые, глубоко вложенные сообщения об ошибках TypeScript в понятный текст с подсветкой синтаксиса прямо в редакторе.
Это меняет то, как TypeScript проверяет типы, или только внешний вид ошибок?Оно меняет только отображение: переформатирует и подсвечивает синтаксис той же ошибки, которую уже выдаёт TypeScript, а саму проверку типов не трогает.
Какие типы файлов и фреймворки оно понимает?Оно поддерживает ошибки .ts для Node и Deno, ошибки JSDoc в .js/.jsx, ошибки React/Solid/Qwik в .tsx/.mdx, файлы Astro/Svelte/Vue при включённом TypeScript, а также шаблоны Ember/Glimmer через Glint.
Могу ли я просто скопировать отформатированный текст ошибки?Напрямую нельзя: рендеринг markdown в VSCode блокирует обычный встроенный код, поэтому автор сымитировал его блоком кода с иконкой codicon, который скопировать нельзя. Копировать приходится из исходной всплывающей панели при наведении.
Можно ли перейти сразу к объявлению типа из ошибки?Да, у каждой ошибки есть кнопка, которая переходит к нужному объявлению типа, а также кнопки со ссылками на typescript.tv и ts-error-translator для объяснения ошибки простыми словами.
Почему это не было простым расширением для создания?Вывод ошибок TypeScript не является корректным синтаксисом TypeScript, поэтому автор написал собственную грамматику TextMate для подсветки и обошёл ограничения стилизации markdown в VSCode, использовав блок кода на основе codicon.
Можно ли скрыть исходную сырую ошибку рядом с отформатированной?В README есть отдельные инструкции, как скрыть исходную ошибку и сделать типы доступными для копирования, но там сказано, что для этого нужно дополнительное обходное решение из-за ограничений VSCode.
Creator
yoavbls
Size
7.3 MB
Stars
14.1K
Age
4y
Commits · 90 Days