Type Hover Links
Type Hover Links adds compact type-reference links to the standard
TypeScript hover in VS Code. Hover a symbol in a TypeScript or TSX file to see
related type names, then click a type name to jump to its definition.
Features
- Adds clickable links for referenced TypeScript types in hover content.
- Resolves nested referenced types from local and imported definitions.
- Ranks definition candidates so local and imported symbols are preferred over
broad workspace-symbol matches.
- Falls back to simple inline type extraction when VS Code does not return a
TypeScript hover.
- Provides a command for showing type information at the cursor.
Preview
When you hover with the mouse, referenced types appear as clickable links in the
hover panel.
Keyboard users can open the VS Code hover, then press the hover command shortcut
again to move focus into the hover panel. From there, use Tab to move
between clickable type links. When a type link is focused, press
Enter to open that type in the editor.
Usage
- Open a
typescript or typescriptreact file.
- Hover a variable, function, class, interface, or type alias.
- Click a referenced type name in the hover to navigate to its definition.
You can also run Type Hover Links: Show Type Information from the command
palette.
Commands
| Command |
Description |
typeHoverLinks.showTypeInfo |
Shows type information at the active cursor. |
Settings
| Setting |
Default |
Description |
typeHoverLinks.includeOriginalHoverText |
false |
Include the original TypeScript hover text below the generated type links. |
typeHoverLinks.nestedTypeResolving.enabled |
true |
Resolve referenced type definitions to discover nested type links. |
typeHoverLinks.maxReferencedTypes |
20 |
Maximum number of type links to show in a hover. |
typeHoverLinks.maxNestedTypeDepth |
2 |
Maximum depth used when resolving nested referenced types. |
typeHoverLinks.logging.enabled |
false |
Write diagnostic logs to the Type Hover Links output channel. |
Limitations
- The extension activates only for file-backed TypeScript and TSX documents.
- Hover links are generated for type-like identifiers, mostly PascalCase names.
- Definition navigation depends on VS Code's TypeScript language features and
falls back to document/workspace symbols when provider results are incomplete.
Development
Install dependencies, compile, and run the Node-based tests:
npm install
npm test
Useful scripts:
npm run compile
npm run watch
npm run lint
npm run test:integration
npm run format:check
Packaging
Use the locally installed vsce command:
npm version patch --no-git-tag-version
npm test
vsce package
The generated artifact is named type-hover-links-<version>.vsix.
