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

1. Command Palette: Press Ctrl + Shift + P (or Cmd + Shift + P on macOS) and run Smart Member Sorter: Sort.
2. Format Document: Right-click inside a TypeScript file and select Format Document (or use the shortcut Shift + Alt + F / Option + Shift + F).
3. Format on Save: Enable smartMemberSorter.sortOnSave to automatically clean up your classes every time you save.

📄 License

MIT