LWC File Switcher

A Visual Studio Code extension to quickly switch between files of a Lightning Web Component (LWC).

Features

• Quickly navigate between HTML, JS, CSS, and configuration files of a Lightning Web Component
• View and access component files from Explorer sidebar panel
• Includes support for all LWC file types (HTML, JS, CSS, configuration, tests, SVG)

Demo

Check out how easy it is to use:

Quick File Switching

Click through the LWC Component Files panel to quickly access any file in your component

Use the Alt+O shortcut to instantly jump between component files without taking your hands off the keyboard

How to Use

Keyboard Shortcuts

• Alt+O (Windows/Linux) or Option+O (Mac): Switch between component files

Other Access Methods

• Explorer Panel: View all related files in the LWC Component Files panel
• Status Bar: Click "LWC: componentName" in the status bar
• Code Lens: Click file links at the top of the file
• Context Menu: Right-click in editor and select "LWC: Switch Component File"
• Command Palette: Use Ctrl+Shift+P or Cmd+Shift+P and search for "LWC: Switch Component File"

Toggle Explorer Panel

• Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
• Search for "LWC: Toggle Component Files Panel"

Requirements

• Visual Studio Code version 1.98.0 or higher

Extension Settings

• lwcFileSwitcher.enableCodeLens: Enable/disable code lens (default: true)
• lwcFileSwitcher.enableStatusBar: Enable/disable status bar item (default: true)
• lwcFileSwitcher.enableStickyHeader: Enable/disable Explorer panel (default: true)

Known Issues

• None currently, but if you find any, please open an issue on repo.

Enjoy!