Sort Members
Инструмент, который физически приводит TS/JS-классы и Angular-шаблоны к единому стилю — не подсвечивает нарушение (как ESLint-правило @typescript-eslint/member-ordering), а сразу переставляет и правит код.
Существует в двух формах на одной и той же логике сортировки:
- VS Code-расширение — сортировка прямо в редакторе: горячая клавиша, кнопка, контекстное меню, Format Document.
- npm CLI (
sort-members) — массовая сортировка всего проекта одной командой в терминале, без открытия файлов в редакторе (например, в CI или разовой миграцией).
Обе формы собираются из одного кода в этом репозитории и дают идентичный результат.
Установка
VS Code-расширение
Соберите .vsix и установите вручную:
npm install
npm run compile
npx vsce package # получится sort-members-<версия>.vsix
Затем в VS Code: Extensions → ... (три точки вверху) → Install from VSIX... → выбрать собранный файл.
📖 Полная инструкция по расширению
npm CLI (sort-members)
npm install --save-dev sort-members
📖 Полная инструкция по CLI
Порядок по умолчанию
Категории идут сверху вниз:
- DI-инъекции —
injected-field
- Input-поля —
public-input-field → protected-input-field → private-input-field
- Output-поля —
public-output-field → protected-output-field → private-output-field
- Static readonly поля —
public-static-readonly-field → ...
- Static mutable поля —
public-static-field → ...
- Сигналы состояния —
signal() / computed() / effect()
- Instance readonly поля —
public-instance-readonly-field → ...
- Instance mutable поля —
public-instance-field → ...
- Конструктор —
constructor
- Lifecycle hooks —
ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit → ... → ngOnDestroy
- Accessors —
get → set
- Static-методы —
public-static-method → ...
- Instance-методы —
public-instance-method → ...
Полный список категорий: таблица в README-EXTENSION.md
Что ещё правит команда
- Явный модификатор доступа (
public/protected/private)
- Пустые строки между членами класса
- Группировка импортов (внешние → локальные)
- Пустая строка между
case в switch
- JSDoc и комментарии переезжают со своим членом
// #region / // #endregion — сортировка внутри регионов
Все правки идемпотентны — повторный запуск ничего не меняет.
Настройка
Свой порядок
VS Code — memberOrdering.order в settings.json:
{
"memberOrdering.order": [
"injected-field",
"constructor",
"public-instance-method"
]
}
CLI — файл .sortmembersrc.json в корне проекта:
{
"order": [
"injected-field",
"constructor",
"public-instance-method"
]
}
Исключение файлов
VS Code — memberOrdering.ignore в settings.json:
{
"memberOrdering.ignore": ["**/*.spec.ts", "**/*.e2e.ts"]
}
CLI — поле ignore в .sortmembersrc.json или флаг --ignore:
sort-members --ignore "**/*.e2e.ts" --ignore "legacy/**" src
Форматирование Angular-шаблонов (.html)
Команда Sort Members: Format Template приводит открывающие теги к единому виду:
- Порядок атрибутов:
*ngIf/*ngFor → #ref → id → class → [class.xxx] → bindings → (event)
- Если атрибутов 2+ — каждый на своей строке
📖 Полная инструкция по расширению |
📖 Полная инструкция по CLI |
🛠 Документация разработчика