Phaser Dev Helper

Build Phaser games faster with inline docs, smart helpers, and keyboard-first workflows.

Phaser Dev Helper is a local-first extension for VS Code/Cursor that gives you quick API understanding, faster boilerplate insertion, and polished sidebar navigation without leaving the editor.

Why This Extension

• Reduce context switching with hover docs and in-editor helper insertion.
• Keep workflows fast with shortcuts, command palette actions, and right-click commands.
• Stay consistent across teams with version-aware Phaser support (v2 and v3).
• Work fully offline with local data packs and workspace-scoped customization.

Feature Highlights

• Rich hover docs: signature, parameters, examples, alternatives, and best-practice notes.
• Smart suggestions: function alternatives and helper snippets during editing.
• Productive helper commands: resize/crop/physics scaffold/search workflows.
• Polished sidebar UX: tabs, search, filter chips, pagination, insert/copy actions.
• Keyboard-first interaction: arrow keys, Tab/Shift+Tab, Home/End, Enter, and copy shortcut.
• Version control for docs: auto detect Phaser version or manually override per workspace.
• Phaser-aware syntax highlighting: semantic highlighting for known Phaser symbols in JS/TS.
• Large bundled API coverage: imported docs for Phaser 2 and Phaser 3 across thousands of APIs.

Screenshots

Use these screenshot files for marketplace/docs visuals:

• media/screenshots/sidebar-docs-list.png - sidebar with docs list
• media/screenshots/sidebar-category-dropdown.png - category dropdown and filtering
• media/screenshots/editor-hover-docs.png - rich hover documentation in editor

Note: if you want embedded screenshot previews in README on Marketplace, set a real repository URL in package.json or package with --baseImagesUrl.

New in v1.0.4

• Added full import pipeline for Phaser docs from official type declarations.
• Bundled expanded API datasets:
  • Phaser 3 function docs: 6000+ entries
  • Phaser 2 function docs: 1900+ entries
• Added generated alias maps for faster symbol lookup.
• Added Phaser-aware semantic token highlighting (enableSemanticHighlighting).
• Kept local-first behavior and offline usability with expanded data.

New in v1.0.5

• Optimized extension packaging to keep runtime bundle lean.
• Excluded non-runtime sources/tests/scripts from VSIX output.
• Added release-time build guard (prepackage) for more reliable packages.

Keyboard Shortcuts

Commands

All commands are available under the Phaser Dev Helper category in the Command Palette:

• Select Phaser Version
• Insert Last Helper
• Resize Sprite To Scene
• Generate Crop Rectangle
• Create Physics Sprite
• Search Functions & Helpers

Sidebar Usage

• Open Phaser Dev Helper from the Activity Bar.
• Switch tabs: Functions, Examples, Helpers, Search.
• Filter by module with chips.
• Use keyboard navigation for smooth result scanning and insertion.
• Click the version button in the sidebar toolbar to switch Phaser version mode.

Version Selection

• Auto mode: detects Phaser major version from project context.
• Manual mode: lock helper/docs behavior to Phaser 2 or Phaser 3.
• Current effective version is visible in the status bar and sidebar.

Local Data Storage

Workspace files:

• .vscode/phaser-dev-helper/functions.json
• .vscode/phaser-dev-helper/helpers.json
• .vscode/phaser-dev-helper/examples.md

Global storage:

• Recent snippets and local diagnostics for cross-project productivity.

Add Support for Future Phaser Releases

1. Add versioned data files in data/:
   • functions.v{major}.json
   • helpers.v{major}.json
   • aliases.v{major}.json
2. Follow the existing schema patterns.
3. Validate and test:
   • npm run validate:data
   • npm run test
4. Document support in the changelog release notes.

Import pipeline

• Run npm run import:docs to regenerate function/alias datasets from installed Phaser package declarations.

Troubleshooting

• Sidebar shows loading for too long
  • Run Developer: Reload Window
  • Confirm extension version is latest installed VSIX
  • Check Output panel channel: Phaser Dev Helper
• No functions appear in sidebar
  • Ensure Functions or Search tab is selected
  • Clear search text and set category to All
  • Switch version mode (manual/auto) and retry
• Manual version not reflected
  • Set Phaser Dev Helper > Version Selection Mode to manual
  • Set Phaser Dev Helper > Manual Version to 2 or 3
  • Reload window
• Semantic highlighting not visible
  • Ensure Phaser Dev Helper > Enable Semantic Highlighting is enabled
  • Ensure editor semantic highlighting is enabled in VS Code settings
• Commands do not insert snippets
  • Open an editable JS/TS file
  • Place cursor in editor before running insert command