 Smart Member Sorter
Intelligently organizes TypeScript and Angular class members using the TypeScript AST.
Smart Member Sorter understands Angular-specific concepts and organizes code based on semantics rather than just basic syntax.
🚀 Key Features
- Angular Modern Support:
- Detects & groups Angular query APIs:
viewChild, viewChildren, contentChild, contentChildren (and their @View / @Content decorators).
- Detects & groups Inputs / Outputs / Models:
input, model, output (and @Input / @Output decorators).
- Detects & groups Angular Signal APIs:
signal, linkedSignal.
- Detects & groups
computed, effect, and Resource APIs: resource, rxResource.
- Dependency Injection: Groups properties initialized with Angular's recommended
inject(...) function.
- RxJS Support: Detects properties ending with
$, Observables, Subjects, and reactive calls like toSignal or toObservable.
- Angular Lifecycle Hooks: Automatically sorts hooks in chronological order:
ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit → ngAfterContentChecked → ngAfterViewInit → ngAfterViewChecked → ngOnDestroy.
- Event Handler Method Mode: Groups your class methods into Public API → Event Handlers (methods starting with
on, handle, toggle) → Helpers (protected) → Private.
- Configurable Sorting Order: Custom orders can be specified via the
smartMemberSorter.order setting.
- Contiguous Imports Sorting: Automatically groups and sorts imports at the top of the file (Angular first, third-party libraries second, local files last).
⚙️ Configuration Settings
You can customize the extension via your VS Code settings.json:
{
// Enable/disable sorting of imports at the top of the file
"smartMemberSorter.sortImports": true,
// Automatically sort members and imports when saving a file
"smartMemberSorter.sortOnSave": false,
// Put properties with Angular decorators at the top of class properties
"smartMemberSorter.angularDecoratorsFirst": true,
// Group Angular Signal-based APIs together
"smartMemberSorter.groupSignalsAndComputed": true,
// How to organize methods: "default" (by visibility) or "eventHandler" (public API -> event handlers -> helpers -> private)
"smartMemberSorter.methodOrganization": "default",
// Custom order of member categories to sort by
"smartMemberSorter.order": [
"static-fields",
"static-methods",
"template",
"inputs",
"signals",
"computed",
"effects",
"resources",
"inject",
"rxjs",
"fields",
"constructor",
"lifecycle",
"public",
"protected",
"private"
]
}
🛠️ How to Use
- Command Palette: Press
Ctrl + Shift + P (or Cmd + Shift + P on macOS) and run Smart Member Sorter: Sort.
- Format Document: Right-click inside a TypeScript file and select Format Document (or use the shortcut
Shift + Alt + F / Option + Shift + F).
- Format on Save: Enable
smartMemberSorter.sortOnSave to automatically clean up your classes every time you save.
📄 License
MIT
| |
