Hover over a regular expression literal in any source file and get an inline railroad-diagram preview — no leaving the editor, no copy-paste to an online tool.
- Open a file that contains a JavaScript-style regex literal (
/pattern/flags). - Hover the cursor over the literal — the railroad diagram renders inside the hover tooltip.
- Click Open in the browser in the tooltip to open the same expression on regexper.com for deeper inspection.
Rendered diagrams are cached per session, so the same pattern renders instantly on subsequent hovers.
- VS Code Marketplace: search for Regex Visualizer, or install
linghaosu.regex-visualizer. - Open VSX: the same identifier is published to the Open VSX registry (best-effort).
Requires Node.js ≥ 20 and pnpm ≥ 10.
pnpm install
pnpm dev # tsup watch
# Press F5 in VS Code to launch an Extension Development Host with sourcemap breakpoints.Common scripts:
| Script | Purpose |
|---|---|
pnpm build |
One-shot build to dist/. |
pnpm check |
typecheck + lint. |
pnpm test |
Run Vitest suites. |
pnpm release |
Tag a stable release (bumpp + changelogen). |
pnpm release:pre |
Tag a -beta.x prerelease. |
Pushing a v* tag to GitHub triggers the release workflow, which packages a VSIX, creates a GitHub Release, and publishes to the VS Code Marketplace (and Open VSX, if OVSX_PAT is configured). Tags containing a pre-id suffix (e.g. v0.1.0-beta.0) are published with the --pre-release flag automatically.
- Regex-to-railroad rendering is derived from regexper-static.
- Regex literal detection logic is adapted from chrmarti/vscode-regex.
MIT License © 2023