vscode-twoslash-queries

A tiny extension for VS Code that lets you use // ^? inside your editor to inline highlight types. Re-uses the existing TypeScript tooling infra in *.ts, *.tsx, *.js, and *.jsx files, simply adding inline info.

Useful for keyboard warriors or folks working on complex types and want to see how changes propagate throughout other types.

Features

Key: You write // ^? anywhere in a source file (with whitespace before, between and middle being whatever) all that matters is the alignment of the ^.

In addition:

• End a line with //=> to highlight the leftmost named type.
• Use the "TwoSlash Query: Insert Below" command from the Command Palette or assign a keyboard shortcut to it (default: Ctrl+K 6 on Windows, Cmd+K 6 on Mac).

You can see here it in use a few times:

Debugging

Ensure that inlay hints are enabled editor.inlayHints.enabled in your VS Code settings.

If the inlay hints are truncated, you may need to increase the inlay hints maximum length editor.inlayHints.maximumLength. This overrides the maxLength of this plugin orta.vscode-twoslash-queries.maxLength (default 120).

This would look like:

{
  "editor.inlayHints.enabled": true,
  "editor.inlayHints.maximumLength": 120,
  "orta.vscode-twoslash-queries.maxLength": 120
}

Deployment

Bump version number.

VS Code:

1. npx vsce publish

OSVX:

1. npx vsce package
2. ovsx publish vscode-twoslash-queries-*.vsix -p [token]
3. rm vscode-twoslash-queries-*.vsix