yel-dspace-angular/docs/lint/ts/rules/sort-standalone-imports.md

DSpace ESLint plugins > TypeScript rules > dspace-angular-ts/sort-standalone-imports

---

Sorts the standalone @Component imports alphabetically

---

Source code

Options

locale

The locale used to sort the imports.,

maxItems

The maximum number of imports that should be displayed before each import is separated onto its own line.,

indent

The indent used for the project.,

trailingComma

Whether the last import should have a trailing comma (only applicable for multiline imports).

Examples

Valid code

should sort multiple imports on separate lines

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    AsyncPipe,
    RootComponent,
  ],
})
export class AppComponent {}

should not inlines singular imports when maxItems is 0

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    RootComponent,
  ],
})
export class AppComponent {}

should inline singular imports when maxItems is 1

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [RootComponent],
})
export class AppComponent {}

With options:

{
  "maxItems": 1
}

Invalid code & automatic fixes

should sort multiple imports alphabetically

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    RootComponent,
    AsyncPipe,
  ],
})
export class AppComponent {}

        

Will produce the following error(s):

Standalone imports should be sorted alphabetically

Result of yarn lint --fix:

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    AsyncPipe,
    RootComponent,
  ],
})
export class AppComponent {}

should not put singular imports on one line when maxItems is 0

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [RootComponent],
})
export class AppComponent {}

        

Will produce the following error(s):

Standalone imports should be sorted alphabetically

Result of yarn lint --fix:

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    RootComponent,
  ],
})
export class AppComponent {}

should not put singular imports on a separate line when maxItems is 1

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    RootComponent,
  ],
})
export class AppComponent {}

        
With options:

```json
{
  "maxItems": 1
}

Will produce the following error(s):

Standalone imports should be sorted alphabetically

        
Result of `yarn lint --fix`:
```typescript
@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [RootComponent],
})
export class AppComponent {}

should not display multiple imports on the same line

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [AsyncPipe, RootComponent],
})
export class AppComponent {}

        

Will produce the following error(s):

Standalone imports should be sorted alphabetically

Result of yarn lint --fix:

@Component({
  selector: 'ds-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    AsyncPipe,
    RootComponent,
  ],
})
export class AppComponent {}