Switch-A-Roo

Overview

Switch-A-Roo simplifies the file-switching process by enabling you to define custom file type associations and utilize keyboard shortcuts to navigate directly to a specific file type or cycle through all configured types.

Features

• Customizable file type associations: Define your own file types
• Keyboard shortcuts: Cycle through all file types or jump to specific ones
• Quick Pick interface: Interactive file type selection to quickly display all related files

Usage

Define your file types using patterns with * wildcards to identify the variable part of filenames:

Sample Configuration

// settings.json
{
    "switch-a-roo.fileTypes": [
        { "name": "Template",  "pattern": "*.html" },
        { "name": "Component", "pattern": "*.ts" },
        { "name": "Styles",    "pattern": "*.css|*.scss|*.sass" }
    ]
}

Available Commands

With file types defined, the following commands are available:

• Previous File Type (Alt + ,) - Switch to the previous file type in your configuration
• Next File Type (Alt + .) - Switch to the next file type in your configuration
• Go to File Type - Interactive picker to select any file type (no default keybinding)

Open a file matching one of your file types and execute these commands to easily navigate between related files.

Custom Keyboard Shortcuts

Create keyboard shortcuts to switch directly to specific file types by using the switch-a-roo.goToFileType command. This will display a list of related file types to choose from. Or, you can pass a file type name as an argument to bypass selection.

// keybindings.json
[
    { "key": "f3", "command": "switch-a-roo.goToFileType" }, // display list
    { "key": "f4", "command": "switch-a-roo.goToFileType", "args": { "name": "Template" } },
    { "key": "f5", "command": "switch-a-roo.goToFileType", "args": { "name": "Component" } },
    { "key": "f6", "command": "switch-a-roo.goToFileType", "args": { "name": "Styles" } }
]

How It Works

Switch-A-Roo uses pattern matching to identify related files:

1. Extract base name: From user-profile.component.ts using pattern *.component.ts → extracts user-profile
2. Find target file: Look for user-profile.component.html using pattern *.component.html
3. Switch files: Open the matching file if found

Extension Settings

• switch-a-roo.fileTypes: Array of file type configurations
  • File Type Properties:
    • name - Unique, friendly name for your file type
    • pattern - Pattern to identify file type using * wildcard (e.g., *.component.ts). Use | to separate multiple patterns
    • ~~endsWith~~ (deprecated - use pattern instead) - Legacy string matching against file paths
    • ~~command~~ (deprecated - use switch-a-roo.goToFileType instead) - Legacy preset command association
• switch-a-roo.enableLogging: Enable detailed logging to Output panel for debugging

Pattern Examples

{
    "switch-a-roo.fileTypes": [
        // Angular files
        { "name": "Angular Component", "pattern": "*.component.ts" },
        { "name": "Angular Template", "pattern": "*.component.html" },
        { "name": "Angular Styles", "pattern": "*.component.scss|*.component.css" },
        { "name": "Angular Test", "pattern": "*.component.spec.ts" },
        
        // React files  
        { "name": "React Component", "pattern": "*.tsx" },
        { "name": "React Styles", "pattern": "*.module.css|*.module.scss" },
        { "name": "React Test", "pattern": "*.test.tsx|*.spec.tsx" },
        
        // Blazor files
        { "name": "Razor Component", "pattern": "*.razor" },
        { "name": "Razor Code-behind", "pattern": "*.razor.cs" },
        { "name": "Razor Styles", "pattern": "*.razor.css" }
    ]
}

Feedback and Support

If you have any questions, encounter issues, or want to provide feedback, please email me at me@BizzyBob.com.