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.
Watch This
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.
Want to explore types in a sidebar tree? Check out:
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
License
MIT
