Related File Cycler

Cycle between related files that share a common root but have different suffixes.

This extension is framework-agnostic and supports preset behavior for common stacks.

Examples

Common Angular-style file families:

• sample-component.component.ts
• sample-component.component.html
• sample-component.component.scss
• sample-component.component.spec.ts
• sample-component.component.stories.ts

It also supports broader patterns, including variant files like:

• sample-component.component.form-link.features.stories.ts
• sample-component.component.form-link.scenarios.stories.ts

Commands

• Cycle Related File Forward (relatedFileCycler.cycleForward)
• Cycle Related File Backward (relatedFileCycler.cycleBackward)

Default Keybindings

• Forward (Windows/Linux): Ctrl+Alt+A
• Backward (Windows/Linux): Ctrl+Shift+Alt+A
• Forward (macOS): Cmd+Alt+A
• Backward (macOS): Cmd+Shift+Alt+A

Configuration

Settings namespace: relatedFileCycler

• preset
  • Dropdown options: angular, react, vue, svelte, nestjs, generic, custom
  • custom uses your arrays below (or safe fallback defaults if empty)
• preferredOrder
  • Suffix priority used for sorting related files
• singleExtensionSuffixes
  • Suffixes treated as one-part extensions for root extraction
• rootAnchors
  • Anchor segments used to detect primary roots

Example settings.json

{
	"relatedFileCycler.preset": "angular",
	"relatedFileCycler.preferredOrder": [],
	"relatedFileCycler.singleExtensionSuffixes": [],
	"relatedFileCycler.rootAnchors": []
}

If arrays are empty, preset defaults are used.

Known Behavior

• File order depends on relatedFileCycler.preset (or your custom preferredOrder).
• With generic, test/story files may appear before source/style files.
• With angular, order is typically component source, template/style, then spec/story files.
• Variant files (for example feature-a.*, feature-b.*) are included in the same family when roots match.
• The current file is included in the related list; cycling moves to the next/previous item from that stable order.

Debug Output

The extension writes a grouped log entry for each cycle attempt to the Output channel:

• Channel: Related File Cycler
• Includes:
  • Direction (forward/backward)
  • Current file name
  • Computed related file list

Open via View -> Output, then select Related File Cycler.

Development

npm install
npm run compile
npm test

To debug in VS Code, press F5 to launch an Extension Development Host.