yoavbls/pretty-ts-errors

これは何？

主な機能

• 01テーマカラーを使って、エラーメッセージ内の型をシンタックスハイライトする
• 02各型の横に、該当する型宣言へ移動するボタンを表示する
• 03エラーの詳しい解説を確認できるtypescript.tvへのリンク
• 04エラーを平易な言葉で説明するts-error-translatorへのリンク
• 05.ts、.tsx、.js、Astro、Svelte、Vue、GlimmerファイルのTypeScriptエラーに対応

ユースケース

• 読みづらいエラーが発生する複雑なジェネリック型やユーティリティ型のデバッグ
• コンパイラが指摘している内容を理解しながらTypeScriptを学ぶ
• 型チェックを多用するReact、Vue、Svelte、Astroプロジェクトでの開発

クイックスタート

1. 1

   コマンドラインから拡張機能をインストールする

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

   または、VSCode Marketplaceでpretty-ts-errorsを検索する

使う前に知っておきたいこと

• !VSCode（およびCursor）内でのみ動作します。JetBrainsのサポートは要望されているものの、まだ利用できません。
• !型をコピーできるようにするには、元のエラーを隠す手動の回避策が必要です。

トピック

よくある質問

pretty-ts-errors とは？

TypeScriptのエラーメッセージを、読みやすくシンタックスハイライトされた型に整形し、ドキュメントや解説へのリンクを追加するVSCode拡張機能です。 型が複雑になるにつれて、TypeScriptのエラーメッセージは読みにくくなりがちです。ネストした括弧や途中で切り詰められた部分、「...」のようなプレースホルダーが頻出します。Pretty TS Errorsは、こうしたメッセージを書き換えて、型を読み取りやすく理解しやすくするVSCode拡張機能です。

pretty-ts-errors は無料で使えますか？ライセンスは？

pretty-ts-errors は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

pretty-ts-errors は今もメンテナンスされていますか？

活発にメンテナンス中。pretty-ts-errors の最終コミットは 2026年10月18日 です。

pretty-ts-errors は何に使えますか？

読みづらいエラーが発生する複雑なジェネリック型やユーティリティ型のデバッグ コンパイラが指摘している内容を理解しながらTypeScriptを学ぶ 型チェックを多用するReact、Vue、Svelte、Astroプロジェクトでの開発

pretty-ts-errors のインストール方法は？

コマンドラインから拡張機能をインストールする: code --install-extension yoavbls.pretty-ts-errors または、VSCode Marketplaceでpretty-ts-errorsを検索する

pretty-ts-errors はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/yoavbls/pretty-ts-errors