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.

Matt Tycholaz