Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Enhanced Component NavigatorNew to Visual Studio Code? Get it now.
Enhanced Component Navigator

Enhanced Component Navigator

eren-yalcin

|
2 installs
| (0) | Free
Jump between component files and their enhanced variants.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Enhanced Component Navigator

Jump between a component file and its enhanced variant without leaving the keyboard. The extension looks for sibling files that follow the *-enhanced.* naming convention and opens the matching file instantly.

✨ Features

  • One-keystroke navigation – Press Cmd+Opt+Ctrl+Shift+E (macOS) or Ctrl+Alt+Shift+E (Windows/Linux) to toggle between base and enhanced files.
  • Flexible extension matching – Works across common JavaScript and TypeScript extensions (.js, .jsx, .ts, .tsx, .mjs, .cjs).
  • Context menu support – Right-click any file in the Explorer or inside an editor tab to open its counterpart.

🚀 Getting Started

  1. Install the extension (or run it in VS Code's Extension Development Host).
  2. Open a component file such as order-and-pay-button.jsx.
  3. Hit the default shortcut or run Enhanced Component Navigator: Open Enhanced/Base Counterpart from the Command Palette.
  4. If order-and-pay-button-enhanced.js exists next to your file, it opens immediately.

If a matching file can't be found, you'll get a quick notification instead of a silent failure.

⚙️ Configuration

Setting Default Description
enhancedComponentNavigator.enhancedSuffix -enhanced Suffix appended to enhanced filenames when locating counterparts.

🧪 Testing

yarn test

📓 Release Notes

0.0.1

  • Initial release with command, keybinding, and context menu navigation between component and enhanced files.

Enjoy building with enhanced components!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft