Prettify TypeScript: Better Type Previews installs statistics

Prettify TypeScript

Get useful type information where you need it.

Prettify TS replaces hard-to-read TypeScript hovers with fully resolved, nicely formatted types. Hover over a type, interface, class, function, or variable to see what it actually is, without chasing through intersections, mapped types, and generics.

<img src="https://github.com/mylesmmurphy/prettify-ts/raw/HEAD/assets/example.png" width="300" alt="Prettified hover preview" />

Watch This

<a href="https://www.youtube.com/shorts/9GRzNXKVa2o" target="_blank"> <img src="https://raw.githubusercontent.com/mylesmmurphy/prettify-ts/refs/heads/main/assets/demo-preview.png" alt="Watch the demo video" width="500" /> </a>

Features

• Prettified hovers for interfaces, type aliases, classes, functions, unions, arrays, and more.
• Copy as TypeScript: copy any prettified type to your clipboard as valid, paste-ready TypeScript.
• Toggle Preview: run Prettify TS: Toggle Preview from the Command Palette to switch prettified hovers on or off.
• Configurable: control depth, indentation, how much is shown, and which types are left as-is.
• TypeScript, JavaScript, and Vue: works in .ts, .tsx, .js, .jsx, and .vue files.

Requirements

• VS Code 1.100.0 or newer.
• Works with the editor's bundled TypeScript or your workspace TypeScript.

JavaScript projects

Hovers use TypeScript's inferred types and JSDoc annotations. For configured projects, include JavaScript files with allowJs in tsconfig.json, or use a jsconfig.json.

Vue projects

• Install the Vue - Official extension, version 3.1.1 or newer. No extra configuration is needed.

Extension Settings

All settings are under prettify-ts.* and can be overridden per language.

Setting	Default	Description
enabled	true	Turns prettified hovers on or off. Toggle Preview flips this.
typeIndentation	4	Spaces used to indent nested types.
maxDepth	1	How many levels of nested types to expand.
maxProperties	1000	Maximum properties shown in total, including nested ones.
maxSubProperties	10	Maximum properties shown on each nested object.
maxUnionMembers	15	Maximum members shown per union.
maxFunctionSignatures	5	Maximum overloads shown per function.
unwrapFunctions	true	Expands function parameter and return types.
unwrapArrays	true	Expands array element types.
unwrapGenericArgumentsTypeNames	Promise, Set, Map, Observable	Generic types whose arguments are expanded instead of the type itself.
skippedTypeNames	Array, Date, Map, Set, …	Types that are never expanded. Hovers show generics as ZodObject<...>; copies keep the arguments.
hidePrivateProperties	true	Hides private and protected members and JavaScript #private fields.
treatUnderscoreAsPrivate	true	Also hides _underscore members when hidePrivateProperties is on.
maxCharacters	20000	Maximum characters in a preview before it is cut off. Higher values are slower.

To show public _underscore members while still hiding private and protected ones:

{
  "prettify-ts.hidePrivateProperties": true,
  "prettify-ts.treatUnderscoreAsPrivate": false
}

Copy as TypeScript

Right-click a type and choose Prettify → Copy Prettified Type to copy what the hover shows, or Copy Fully Prettified Type to expand every level. Either way, the clipboard gets valid TypeScript you can paste straight into your code: omitted members become comments like /* ... 3 more */, and skipped types keep their generic arguments.

Related Projects

Want to explore types in a sidebar tree? Check out:

• TypeScript Explorer
• ts-type-expand

Contributing

Bug reports, suggestions, and pull requests are welcome on GitHub. If something isn't working, the Prettify TS output channel usually has details worth including.

Acknowledgements

• @mattpocock: original inspiration via Prettify Type
• @willbattel: early beta testing and feedback
• @mattiamanzati: TypeScript compiler insights

License

MIT