From 18647c1a58fbbef86e3bdbeecfccac11bbe5c9c8 Mon Sep 17 00:00:00 2001 From: Yoav Balasiano Date: Wed, 31 Jul 2024 23:52:00 +0300 Subject: [PATCH] Document the custom CSS hack (#119) * Add docs for the custom CSS hack * Bump version --- README.md | 47 +++++++++++++++++++--------------- docs/hide-original-errors.md | 20 +++++++++++++++ docs/pretty-ts-errors-hack.css | 28 ++++++++++++++++++++ package.json | 2 +- 4 files changed, 75 insertions(+), 22 deletions(-) create mode 100644 docs/hide-original-errors.md create mode 100644 docs/pretty-ts-errors-hack.css diff --git a/README.md b/README.md index bbdec17..8e262f2 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,8 @@ # Pretty `TypeScript` Errors -Make TypeScript errors prettier and human-readable in VSCode. - +Make TypeScript errors prettier and human-readable in VSCode. + [![GitHub stars](https://img.shields.io/github/stars/yoavbls/pretty-ts-errors.svg?style=social&label=Star)](https://GitHub.com/yoavbls/pretty-ts-errors/stargazers/) [![Visual Studio Code](https://img.shields.io/badge/--007ACC?logo=visual%20studio%20code&logoColor=ffffff)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) [![GitHub license](https://badgen.net/github/license/yoavbls/pretty-ts-errors)](https://github.com/yoavbls/pretty-ts-errors/blob/main/LICENSE) [![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) Webstorm logo @@ -17,50 +17,57 @@ 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: +and others from: [Web Dev Simplified](https://www.youtube.com/watch?v=ccg-erZYO4k&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=1), [Josh tried coding](https://www.youtube.com/watch?v=_9y29Cyo9uU&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=3), [trash dev](https://www.youtube.com/watch?v=WJeD3DKlWT4&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=4&t=208), and [more](https://www.youtube.com/playlist?list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR) - ## Features + - Syntax highlighting with your theme colors for types in error messages, supporting both light and dark themes - A button that leads you to the relevant type declaration next to the type in the error message - 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 - A button that navigates you to [ts-error-translator](https://ts-error-translator.vercel.app/), where you can read the error in plain English ## Supports + - Node and Deno TypeScript error reporters (in `.ts` files) - JSDoc type errors (in `.js` and `.jsx` files) - React, Solid and Qwik errors (in `.tsx` and `.mdx` files) - Astro, Svelte and Vue files when TypeScript is enabled (in `.astro`, `.svelte` and `.vue` files) - Ember and Glimmer TypeScript errors and template issues reported by Glint (in `.hbs`, `.gjs`, and `.gts` files) - - + ## Installation + ``` code --install-extension yoavbls.pretty-ts-errors ``` -Or simply by searching for `pretty-ts-errors` in the [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) - - + +Or simply by searching for `pretty-ts-errors` in the [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) + +#### How to hide the original errors and make the types copyable + +Follow the instructions [there](./docs/hide-original-errors.md). 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. + 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 @@ -88,8 +95,8 @@ Yes, these types include things like `... more ...`, `{ ... }`, etc in an incons - -### Stars from stars +### Stars from stars + @@ -127,14 +134,12 @@ Yes, these types include things like `... more ...`, `{ ... }`, etc in an incons
- ## 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](https://github.com/yoavbls/pretty-ts-errors/discussions/43) Any other contribution is welcome. Feel free to open any issue / PR you think. - - - diff --git a/docs/hide-original-errors.md b/docs/hide-original-errors.md new file mode 100644 index 0000000..114e303 --- /dev/null +++ b/docs/hide-original-errors.md @@ -0,0 +1,20 @@ +To hide the original errors, display only the prettified ones, and make type blocks copyable, you can use the following hack: + +## The Hack + +1. Install the [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) extension from the VSCode marketplace. + +2. Follow the installation instructions provided by the extension, and use [this CSS file](./pretty-ts-errors-hack.css). + +## Why Do We Need This Hack? + +### Hiding Original Errors + +Unfortunately, VSCode doesn't currently support formatted diagnostics. Once it does, we'll be able to convert the extension to a TypeScript LSP Plugin that replaces the original error with the prettified version. +For updates on this feature, follow [this issue](https://github.com/yoavbls/pretty-ts-errors/issues/3). + +### Making Type Blocks Copyable + +VSCode sanitizes and removes most CSS properties for security reasons. We've opened an [issue](https://github.com/microsoft/vscode/issues/180496) and submitted a [PR](https://github.com/microsoft/vscode/pull/180498) to allow the use of the `display` property. This would enable us to layout the types in a way that allows copying. + +Until this change is approved, you can use the hack described above as a workaround. diff --git a/docs/pretty-ts-errors-hack.css b/docs/pretty-ts-errors-hack.css new file mode 100644 index 0000000..6ea7bcd --- /dev/null +++ b/docs/pretty-ts-errors-hack.css @@ -0,0 +1,28 @@ +/* Allow copying */ +.codicon-none { + user-select: text !important; + -webkit-user-select: text !important; +} + +/* Hide errors */ +div.monaco-hover-content:has(.codicon-none) > .hover-row:first-child { + display: none !important; +} +div.monaco-hover-content:has([style="color:#f96363;"]) > .hover-row:first-child { + display: none !important +} + +/* Change order */ +.monaco-hover .monaco-hover-content { + display: flex; + flex-direction: column; +} +.monaco-hover .monaco-hover-content .hover-row { + order: 2; +} +.monaco-hover .monaco-hover-content .hover-row:has(.codicon-none) { + order: 1; +} +.monaco-hover .monaco-hover-content .hover-row:has([style="color:#f96363;"]) { + order: 1; +} \ No newline at end of file diff --git a/package.json b/package.json index c7cf460..266281d 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "displayName": "Pretty TypeScript Errors", "publisher": "YoavBls", "description": "Make TypeScript errors prettier and more human-readable in VSCode", - "version": "0.6", + "version": "0.6.0", "icon": "assets/icon.png", "repository": { "type": "git",