aljazsim / vs-code-typescript-class-organizer

VS Code extension for organizing your TypeScript code

TypeScript Class Organizer for VS Code

VS Code extension for keeping your TypeScript code organized by grouping and ordering class members.

Features

Organize currently opened TypeScript file or all TypeScript files in your project.

Usage

Command Palette

From the command palette you can:

• organize current TypeScript file by invoking command TypeScript Class Organizer: Organize Current File,
• organize all TypeScript files in the project by invoking command TypeScript Class Organizer: Organize All Files

Keybboard Shortcuts

You can invoke command TypeScript Class Organizer: Organize Current File by using the shortcut Ctr + Shift + O. You can change the shortcut by assigning a different shortcut to command "tsco.organize".

Context Menu

You can invoke command TypeScript Class Organizer: Organize Current File by using the context menu item.

Configuration

Extensions supports the following configuration options:

Regions

• tsco.useRegions: Adds member group regions (true by default).
• tsco.addMemberCountInRegionName: Adds member group region member count after region title (true by default).
• tsco.addPublicModifierIfMissing: Adds public access modifier if missing (true by default).
• tsco.addRegionIndentation: Adds region indentation (true by default).
• tsco.addRegionCaptionToRegionEnd: Adds region caption to region end (true by default).

Access modifiers

• tsco.addPublicModifierIfMissing: Adds a public access modifier if missing.

Decorators

• tsco.groupPropertiesWithDecorators: Properties with decorators will come first, ordered by decorator name, then by member name (false by default).

Arrow functions

• tsco.treatArrowFunctionPropertiesAsMethods: Arrow function properties will be treated as methods (false by default).

Actions

• tsco.organizeOnSave: Source code will get organized automatically on file saved (false by default).

Member ordering

• tsco.memberOrder: Configuration of grouping and ordering of members.

By default members are grouped and ordered in the following way:

• properties,
  • private static const properties,
  • private const properties,
  • private static readonly properties,
  • private readonly properties,
  • private static properties,
  • private properties,
  • protected static const properties,
  • protected const properties,
  • protected static readonly properties,
  • protected readonly properties,
  • protected static properties,
  • protected properties,
  • public static const properties,
  • public const properties,
  • public static readonly properties,
  • public readonly properties,
  • public static properties,
  • public properties,
• static block declarations,
• constructors,
• public static indexes,
• public indexes,
• public abstract indexes,
• protected static indexes,
• protected indexes,
• protected abstract indexes,
• private static indexes,
• private indexes,
• private abstract indexes,
• public static accessors,
• public accessors,
• public abstract accessors,
• protected static accessors,
• protected accessors,
• protected abstract accessors,
• private static accessors,
• private accessors,
• private abstract accessors,
• public static getters and setters,
• public getters and setters,
• public abstract getters and setters,
• protected static getters and setters,
• protected getters and setters,
• protected abstract getters and setters,
• private static getters and setters,
• private getters and setters,
• private abstract getters and setters,
• public static methods,
• public methods,
• public abstract methods,
• protected static methods,
• protected methods,
• protected abstract methods,
• private static methods,
• private methods,
• private abstract methods.

This configuration can ge changed by using the tsco.memberOrder setting in `settings.json``. Members can be grouped separately or grouped together with other member groups in a two level hierarchy. Every group has a property:

• caption (only for top level groups): the caption will be outputted if tsco.useRegions is set to true,
• memberType (top and bottom level groups): the type of the member in the group:
  • privateStaticConstProperties
  • privateConstProperties
  • privateStaticReadOnlyProperties
  • privateReadOnlyProperties
  • privateStaticProperties
  • privateProperties
  • protectedStaticConstProperties
  • protectedConstProperties
  • protectedStaticReadOnlyProperties
  • protectedReadOnlyProperties
  • protectedStaticProperties
  • protectedProperties
  • publicStaticConstProperties
  • publicConstProperties
  • publicStaticReadOnlyProperties
  • publicReadOnlyProperties
  • publicStaticProperties
  • publicProperties
  • staticBlockDeclarations,
  • constructors
  • publicStaticIndexes
  • publicIndexes
  • publicAbstractIndexes
  • protectedStaticIndexes
  • protectedIndexes
  • protectedAbstractIndexes
  • privateStaticIndexes
  • privateIndexes
  • privateAbstractIndexes
  • publicStaticAccessors
  • publicAccessors
  • publicAbstractAccessors
  • protectedStaticAccessors
  • protectedAccessors
  • protectedAbstractAccessors
  • privateStaticAccessors
  • privateAccessors
  • privateAbstractAccessors
  • publicStaticGettersAndSetters
  • publicGettersAndSetters
  • publicAbstractGettersAndSetters
  • protectedStaticGettersAndSetters
  • protectedGettersAndSetters
  • protectedAbstractGettersAndSetters
  • privateStaticGettersAndSetters
  • privateGettersAndSetters
  • privateAbstractGettersAndSetters
  • publicStaticMethods
  • publicMethods
  • publicAbstractMethods
  • protectedStaticMethods
  • protectedMethods
  • protectedAbstractMethods
  • privateStaticMethods
  • privateMethods
  • privateAbstractMethod
• subGroups (only for top level groups): the array of member types to be included in this group.
• placeAbove: list of member names to be put at the top of the group in the order specified (optional)
• placeBelow: list of member names to be put at the bottom of the group in the order specified (optional)

Example of the default tsco.memberOrder setting:

{
  "tsco.memberOrder": [
    {
      "caption": "Properties",
      "memberTypes": [
        "privateStaticConstProperties",
        "privateConstProperties",
        "privateStaticReadOnlyProperties",
        "privateReadOnlyProperties",
        "privateStaticProperties",
        "privateProperties",
        "protectedStaticConstProperties",
        "protectedConstProperties",
        "protectedStaticReadOnlyProperties",
        "protectedReadOnlyProperties",
        "protectedStaticProperties",
        "protectedProperties",
        "publicStaticConstProperties",
        "publicConstProperties",
        "publicStaticReadOnlyProperties",
        "publicReadOnlyProperties",
        "publicStaticProperties",
        "publicProperties"
      ]
    },
    {
      "caption": "Static Block Declarations",
      "memberTypes": ["staticBlockDeclarations"]
    },
    {
      "caption": "Constructors",
      "memberTypes": ["constructors"]
    },
    {
      "caption": "Public Static Indexers",
      "memberTypes": ["publicStaticIndexes"]
    },
    {
      "caption": "Public Indexers",
      "memberTypes": ["publicIndexes"]
    },
    {
      "caption": "Public Abstract Indexers",
      "memberTypes": ["publicAbstractIndexes"]
    },
    {
      "caption": "Protected Static Indexers",
      "memberTypes": ["protectedStaticIndexes"]
    },
    {
      "caption": "Protected Indexers",
      "memberTypes": ["protectedIndexes"]
    },
    {
      "caption": "Protected Abstract Indexers",
      "memberTypes": ["protectedAbstractIndexes"]
    },
    {
      "caption": "Private Static Indexers",
      "memberTypes": ["privateStaticIndexes"]
    },
    {
      "caption": "Private Indexers",
      "memberTypes": ["privateIndexes"]
    },
    {
      "caption": "Private Abstract Indexers",
      "memberTypes": ["privateAbstractIndexes"]
    },
    {
      "caption": "Public Static Accessors",
      "memberTypes": ["publicStaticAccessors"]
    },
    {
      "caption": "Public Accessors",
      "memberTypes": ["publicAccessors"]
    },
    {
      "caption": "Public Abstract Accessors",
      "memberTypes": ["publicAbstractAccessors"]
    },
    {
      "caption": "Protected Static Accessors",
      "memberTypes": ["protectedStaticAccessors"]
    },
    {
      "caption": "Protected Accessors",
      "memberTypes": ["protectedAccessors"]
    },
    {
      "caption": "Protected Abstract Accessors",
      "memberTypes": ["protectedAbstractAccessors"]
    },
    {
      "caption": "Private Static Accessors",
      "memberTypes": ["privateStaticAccessors"]
    },
    {
      "caption": "Private Accessors",
      "memberTypes": ["privateAccessors"]
    },
    {
      "caption": "Private Abstract Accessors",
      "memberTypes": ["privateAbstractAccessors"]
    },
    {
      "caption": "Public Static Getters And Setters",
      "memberTypes": ["publicStaticGettersAndSetters"]
    },
    {
      "caption": "Public Getters And Setters",
      "memberTypes": ["publicGettersAndSetters"]
    },
    {
      "caption": "Public Abstract Getters And Setters",
      "memberTypes": ["publicAbstractGettersAndSetters"]
    },
    {
      "caption": "Protected Static Getters And Setters",
      "memberTypes": ["protectedStaticGettersAndSetters"]
    },
    {
      "caption": "Protected Getters And Setters",
      "memberTypes": ["protectedGettersAndSetters"]
    },
    {
      "caption": "Protected Abstract Getters And Setters",
      "memberTypes": ["protectedAbstractGettersAndSetters"]
    },
    {
      "caption": "Private Static Getters And Setters",
      "memberTypes": ["privateStaticGettersAndSetters"]
    },
    {
      "caption": "Private Getters And Setters",
      "memberTypes": ["privateGettersAndSetters"]
    },
    {
      "caption": "Private Abstract Getters And Setters",
      "memberTypes": ["privateAbstractGettersAndSetters"]
    },
    {
      "caption": "Public Static Methods",
      "memberTypes": ["publicStaticMethods"]
    },
    {
      "caption": "Public Methods",
      "memberTypes": ["publicMethods"]
    },
    {
      "caption": "Public Abstract Methods",
      "memberTypes": ["publicAbstractMethods"]
    },
    {
      "caption": "Protected Static Methods",
      "memberTypes": ["protectedStaticMethods"]
    },
    {
      "caption": "Protected Methods",
      "memberTypes": ["protectedMethods"]
    },
    {
      "caption": "Protected Abstract Methods",
      "memberTypes": ["protectedAbstractMethods"]
    },
    {
      "caption": "Private Static Methods",
      "memberTypes": ["privateStaticMethods"]
    },
    {
      "caption": "Private Methods",
      "memberTypes": ["privateMethods"]
    },
    {
      "caption": "Private Abstract Methods",
      "memberTypes": ["privateAbstractMethods"]
    }
  ]
}

If you'd like to order special members differently, you can yuse the placeAbove and placeBelow properties for a particular tsco.memberOrder item. If for example you prefer Angular component lifecycle methods on top of public methods, you can configure publicMethods member group like this:

"tsco.memberOrder": [
  ...,
  {
    "caption": "Public Methods",
    "memberTypes": ["publicMethods"],
    "placeAbove": [
        "ngOnChanges", 
        "ngOnInit", 
        "ngDoCheck", 
        "ngAfterContentInit", 
        "ngAfterContentChecked", 
        "ngAfterViewInit", 
        "ngAfterViewChecked", 
        "ngOnDestroy"
    ]
  },
  ...
]

The placeAbove methods will always apear at the top of the public method membber group in the list as specified (if any exist in the class being ordered) and the rest of the methods will be ordered by name and placed below the placeAbove methods. Same goes for placeBelow, but those members will be placed at the bottom of the member group.

Ignoring files

In order to prevent a TypeScript file being organized, add one of the following comments to the top of the source file:

// tsco:ignore

or

// <auto-generated />

Change log

1.0.0

• Initial release.

1.0.9

• added add public modifier if missing option
• added add region Indentation option
• added end region caption option
• added organizing type aliases, interfaces, classes and functions
• fixed issue with Indentation tabs / spaces
• fixed issue when comments were preceding class members
• fixed issue when decorators were preceding class members
• fixed issue with removing redundant empty lines
• updated referenced packages

1.0.10

• added group properties with decorators option

1.0.11

• fixed issue with duplicated regions
• addded grouping by decorator for all elements, not just properties when grouping by decorators
• added a new line between group with decorators and group without decorators when grouping by decorators

1.0.12

• removed limitation where extension can be activated only when not in debug mode
• fixed bug where redundant empty lines were not removed correctly
• fix bug where public access modifier was not added to methods

1.0.14

• added option of adding number of members within a region (courtesy of pillont)
• added option to output accessors before constructor (courtesy of pillont)

1.0.15

• add option to customize grouping and ordering of members

1.0.16

• fix bug where accessors (getters and setters) got removed when organizing a class

1.0.17

• added option to treat arrow function properties as methods (courtesy of testpossessed)
• fix bug where assync methods were not assigned a public access modifier correctly

1.0.19

• added option organize file on save

1.0.21

• fixed issue where static members without an access modifier were not correctly decorated with the public access modifier

1.0.23

• fixed issue where a redundant empty line was added when organising arrow type method properties
• fixed issue where default access modifier is not correctly set
• fixed issue where invalid member names are used
• trigger organizing members only if manually saving the file and not if autosave is on in VS Code (courtesy of Donny Verduijn)

1.0.24

• add support for private identifiers for properties and methods

1.0.25

• fix issue where intefaces lost getters/setters when organizing
• add support for a special member list to be put at the top or bottom of a member group

1.0.26

• update README

1.0.27

• add support for organizing accessors
• add support for organizing static block declarations
• add support for organizing functions outside of classes
• add support for ignoring files

1.0.28

• fix TS reference error

1.0.29

• fix accessor issue when decorator contains a parameter with the name of the field

vs-code-typescript-class-organizer's Issues

Order by Decorator

Can we order by decorator in addition to order by access level? For example, I would like to move

@ViewChild('test') private test: Test;

above all member properties

And it would be nice if we can control the order of the decorators. For example, we can choose to put @input on top or at the bottom of @ViewChild

If not, can we have some ignore blocks where the organizer won't touch if we manually order a portion of the code? Maybe like

// vs-code-typescript-class-organizer:disable

some manually order code...

// vs-code-typescript-class-organizer:enable

remove count in region && accessor before ctor

Hello,

My team want to use your tool, but we need to have more config to match with our needs.
So I did a new MR to add there :
https://github.com/aljazsim/vs-code-typescript-class-organizer/pull/13/files

Can you please, take a look on this changes and make a feedback to update your fabulous tool together ? :D

Thanks in advance !

BUG: Static initialization blocks are removed when class organizer is run

Static initialization blocks are simply disappearing (removed) when organizing a class. For example,

class X {
	private static v: number;
	static {
		this.v = 42;
	}
}

will turn into

class X {
	private static v: number;
}

after reorganization.

The correct behavior would be to move it, e.g., before the constructor.

Issue organizing a file .ts

Hi, I use this beatiful VSCode extension, but I have a problem with a particular file.

This is my file .ts

import { Preset } from 'src/app/dto/preset';
import { DtoResponseBase, DtoResponseList } from 'src/util/utils';
import { DtoAssignOrganizationValidate, DtoOrganization, Organization } from './organizzazioni';
import { DtoNotifyPreference, DtoPaymentPreference, NotifyPreference, PaymentPreference, Preference } from './preferenze';
import { DtoPreset } from './preset';
import { DtoRole, Role } from './role';
import { DtoSecurity, Security } from './security';
import { DtoWorkspacePresetValidated } from './workspaces';
export type DtoUtenzeResponse = DtoResponseBase<DtoAccount>;

export type DtoUtenzeListResponse = DtoResponseBase<DtoResponseList<DtoAccount>>;

export type DtoSearchUtenzeResponse = DtoResponseList<DtoAccount>;

// LISTA
export interface Account {
  id: string;
  nome: InfoUtente;
  organizzazioni: Organization[];
  ruolo: Role;
  security: Security;
  username: string;
  preferenze?: Preference;
  privacy?: PrivacyPolicy;
  paymentPreference?: PaymentPreference;
  notifyPreference?: NotifyPreference;
}

export interface InfoUtente {
  immagineProfile: string;
  nome: string;
  cognome: string;
  mail: string;

}

// it corresponds to DtoAccount
export interface AccountDetail {
  id: string;
  nome: InfoUtente;
  organizzazioni: Organization[];
  ruolo: Role;
  username?: string;
  professione?: string;
  sede?: string;
  numeroTeleofno?: string;
  role?: DtoRole;
  organizations?: Organization[];
  security?: Security;
  preferenze?: Preference;
  twoFAEnabled?: boolean;
  permessi?: Preset;
}

export interface DtoUpdateAccountProfileRequest {
  accountId: string;
  username: string;
  name: string;
  surname: string;
  email: string;
  position: string;
  city: string;
  organizations: DtoAssignOrganizationValidate[];
}
export interface UpdateAccountProfileRequest {
  accountId: string;
  username: string;
  nome: string;
  cognome: string;
  mail: string;
  numeroTeleofno?: string;
  professione?: string;
  sede?: string;
  organizations: DtoAssignOrganizationValidate[];

}

export interface DtoPreference {
  dateFormat?: string;
  numberFormat?: string;
  languageFormat?: string;
  timeFormat?: string;
  timeZone?: string;
  defaultWorkspaceId?: string;

}
export interface DtoAccount {
  accountId?: string;
  username?: string;
  email?: string;
  bsEmail?: string;
  name?: string;
  surname?: string;
  imageId?: string;
  position?: string;
  city?: string;
  phoneNumber?: string;
  role?: DtoRole;
  organizations?: DtoOrganization[];
  preference?: Preference;
  security?: DtoSecurity;
  hasWorkspacePermissions?: boolean;
  twoFAEnabled?: boolean;
  privacyPolicy?: DtoPrivacyPolicy;
  preset?: DtoPreset;
  paymentPreference?: DtoPaymentPreference;
  notifyPreference?: DtoNotifyPreference;

}

export interface DtoUpdatePhoneNumberSendSmsOtpRequest {
  phoneNumber: string;
  checkedMailOtpToken: string;
}

export interface DtoUpdatePhoneNumberValidateMailOtpRequest {
  otp: string;
  validateMailOtpToken: string;
}

export interface DtoUpdatePhoneNumberSendSmsOtpResponse {
  authId: string;
  serverNum: string;
  phoneNumber: string;
  validateSmsOtpToken: string;
  resendSmsOtpToken: string;
}

export interface DtoUpdatePhoneNumberSendMailOtpResponse {
  validateMailOtpToken: string;
}

export interface DtoUpdatePhoneNumberValidateSmsOtpRequest {
  phoneNumber: string;
  otp: string;
  serverNum: string;
  authId: string;
  validateSmsOtpToken: string;
}

export interface DtoPrivacyPolicy {
  termsAndCondition?: boolean;
  termsAndCondition2?: boolean;
  termsAndCondition3?: boolean;
}

export interface PrivacyPolicy {
  policy_1?: boolean;
  policy_2?: boolean;
  policy_3?: boolean;
}

// LISTA END

// DETTAGLIO

// DETTAGLIO END

// NUOVA UTENZA
export interface DtoInsertAccount {
  username?: string;
  roleId?: string;
  organizations?: DtoOrganization[];
  workspaces?: DtoWorkspacePresetValidated[];
}

// NUOVA UTENZA END

// ASSEGNA A WRK

export interface DtoAssignAccountValidate {
  accountId?: string;
  presetId?: string;
}

// UTILI

export interface NewUser {
  mail: string;
}

export interface DtoOptionsPreview {
  text_1?: string;
  text2_?: string;
  text3_?: string;
}

export interface DtoUpdatePhoneNumberValidateMailOtpResponse {
  checkedMailOtpToken: string;
}

// export interface DtoListaAmministratoriFE {
//   lovCode: string;
//   lovValue: string;
// }

Wrong organization
when I organize this file, the result isn't good:

import { Preset } from 'src/app/dto/preset';
import { DtoResponseBase, DtoResponseList } from 'src/util/utils';
import { DtoAssignOrganizationValidate, DtoOrganization, Organization } from './organizzazioni';
import { DtoNotifyPreference, DtoPaymentPreference, NotifyPreference, PaymentPreference, Preference } from './preferenze';
import { DtoPreset } from './preset';
import { DtoRole, Role } from './role';
import { DtoSecurity, Security } from './security';
import { DtoWorkspacePresetValidated } from './workspaces';
export type DtoUtenzeResponse = DtoResponseBase<DtoAccount>;

export type DtoUtenzeListResponse = DtoResponseBase<DtoResponseList<DtoAccount>>;

export type DtoSearchUtenzeResponse = DtoResponseList<DtoAccount>;

// LISTA
export interface Account {
  // #region Properties (10)

  i
  d: string;
  n
  ome: InfoUtente;
  n
  otifyPreference?: NotifyPreference;
  o
  rganizzazioni: Organization[];
  p
  aymentPreference?: PaymentPreference;
  p
  referenze?: Preference;
  p
  rivacy?: PrivacyPolicy;
  r
  uolo: Role;
  s
  ecurity: Security;
  u
  sername: string;

  // #endregion Properties (10)
}

export interface InfoUtente {
  // #region Properties (4)

  c
  ognome: string;
  i
  mmagineProfile: string;
  m
  ail: string;
  n
  ome: string;

  // #endregion Properties (4)
}

// it corresponds to DtoAccount
export interface AccountDetail {
  // #region Properties (14)

  i
  d: string;
  n
  ome: InfoUtente;
  n
  umeroTeleofno?: string;
  o
  rganizations?: Organization[];
  o
  rganizzazioni: Organization[];
  p
  ermessi?: Preset;
  p
  referenze?: Preference;
  p
  rofessione?: string;
  r
  ole?: DtoRole;
  r
  uolo: Role;
  s
  ecurity?: Security;
  s
  ede?: string;
  t
  woFAEnabled?: boolean;
  u
  sername?: string;

  // #endregion Properties (14)
}

export interface DtoUpdateAccountProfileRequest {
  // #region Properties (8)

  a
  ccountId: string;
  c
  ity: string;
  e
  mail: string;
  n
  ame: string;
  o
  rganizations: DtoAssignOrganizationValidate[];
  p
  osition: string;
  s
  urname: string;
  u
  sername: string;

  // #endregion Properties (8)
}
export interface UpdateAccountProfileRequest {
  // #region Properties (9)

  a
  ccountId: string;
  c
  ognome: string;
  m
  ail: string;
  n
  ome: string;
  n
  umeroTeleofno?: string;
  o
  rganizations: DtoAssignOrganizationValidate[];
  p
  rofessione?: string;
  s
  ede?: string;
  u
  sername: string;

  // #endregion Properties (9)
}

export interface DtoPreference {
  // #region Properties (6)

  d
  ateFormat?: string;
  d
  efaultWorkspaceId?: string;
  l
  anguageFormat?: string;
  n
  umberFormat?: string;
  t
  imeFormat?: string;
  t
  imeZone?: string;

  // #endregion Properties (6)
}
export interface DtoAccount {
  // #region Properties (20)

  a
  ccountId?: string;
  b
  sEmail?: string;
  c
  ity?: string;
  e
  mail?: string;
  h
  asWorkspacePermissions?: boolean;
  i
  mageId?: string;
  n
  ame?: string;
  n
  otifyPreference?: DtoNotifyPreference;
  o
  rganizations?: DtoOrganization[];
  p
  aymentPreference?: DtoPaymentPreference;
  p
  honeNumber?: string;
  p
  osition?: string;
  p
  reference?: Preference;
  p
  reset?: DtoPreset;
  p
  rivacyPolicy?: DtoPrivacyPolicy;
  r
  ole?: DtoRole;
  s
  ecurity?: DtoSecurity;
  s
  urname?: string;
  t
  woFAEnabled?: boolean;
  u
  sername?: string;

  // #endregion Properties (20)
}

export interface DtoUpdatePhoneNumberSendSmsOtpRequest {
  // #region Properties (2)

  c
  heckedMailOtpToken: string;
  p
  honeNumber: string;

  // #endregion Properties (2)
}

export interface DtoUpdatePhoneNumberValidateMailOtpRequest {
  // #region Properties (2)

  o
  tp: string;
  v
  alidateMailOtpToken: string;

  // #endregion Properties (2)
}

export interface DtoUpdatePhoneNumberSendSmsOtpResponse {
  // #region Properties (5)

  a
  uthId: string;
  p
  honeNumber: string;
  r
  esendSmsOtpToken: string;
  s
  erverNum: string;
  v
  alidateSmsOtpToken: string;

  // #endregion Properties (5)
}

export interface DtoUpdatePhoneNumberSendMailOtpResponse {
  // #region Properties (1)

  v
  alidateMailOtpToken: string;

  // #endregion Properties (1)
}

export interface DtoUpdatePhoneNumberValidateSmsOtpRequest {
  // #region Properties (5)

  a
  uthId: string;
  o
  tp: string;
  p
  honeNumber: string;
  s
  erverNum: string;
  v
  alidateSmsOtpToken: string;

  // #endregion Properties (5)
}

export interface DtoPrivacyPolicy {
  // #region Properties (3)

  t
  ermsAndCondition?: boolean;
  t
  ermsAndCondition2?: boolean;
  t
  ermsAndCondition3?: boolean;

  // #endregion Properties (3)
}

export interface PrivacyPolicy {
  // #region Properties (3)

  p
  olicy_1?: boolean;
  p
  olicy_2?: boolean;
  p
  olicy_3?: boolean;

  // #endregion Properties (3)
}

// LISTA END

// DETTAGLIO

// DETTAGLIO END

// NUOVA UTENZA
export interface DtoInsertAccount {
  // #region Properties (4)

  o
  rganizations?: DtoOrganization[];
  r
  oleId?: string;
  u
  sername?: string;
  w
  orkspaces?: DtoWorkspacePresetValidated[];

  // #endregion Properties (4)
}

// NUOVA UTENZA END

// ASSEGNA A WRK

export interface DtoAssignAccountValidate {
  // #region Properties (2)

  a
  ccountId?: string;
  p
  resetId?: string;

  // #endregion Properties (2)
}

// UTILI

export interface NewUser {
  // #region Properties (1)

  m
  ail: string;

  // #endregion Properties (1)
}

export interface DtoOptionsPreview {
  // #region Properties (3)

  t
  ext2_?: string;
  t
  ext3_?: string;
  t
  ext_1?: string;

  // #endregion Properties (3)
}

export interface DtoUpdatePhoneNumberValidateMailOtpResponse {
  // #region Properties (1)

  checkedMailOtpToken: string;

  // #endregion Properties (1)
}

// export interface DtoListaAmministratoriFE {
//   lovCode: string;
//   lovValue: string;
// }

Arrow function methods not recognised

Thanks for the feature to support control of member ordering. Works great, but I have found one issue that spoils it a bit.

If I define a member as an arrow function, as needed to maintain this context when creating event handlers etc, it is not recognised as a method instead it is organised as a property. This causes a violation of tslint member-order rule with the following message:

Declaration of public instance field not allowed after declaration of public instance method. Instead, this should come at the beginning of the class/interface

I had a look at the source code and it looks like the problem might be with TypeScript not recognising the member as a method. So not sure if you can do anything about it but would appreciate you taking a look.

I have attached a screen shot to help understand the problem.

BUG: Decorator handling is broken

If you run on a class that has a field with the same name as the string used in its decorator, e.g.,

class X {
   @ViewChild("canvas") canvas: xxx;
}

the result will be

class X {
   @ViewChild("public canvas") canvas: xxx;
}

instead of the expected

class X {
   @ViewChild("canvas") public canvas: xxx;
}

This is quite a significant problem, as it breaks the code.

Accesssors are broken when reorganizing

Using an accessor such as:

class Example {
    accessor name = "value";
}

when run through the class organizer it incorrectly generates the following:

export default class Example {
    accessor
    name = "value";
}

which gets interpreted as (due to ASI) as:

export default class Example {
    accessor;
    name = "value";
}

Feature request: Organize modules

It's common to write modules instead of classes nowadays as you probably don't need to use classes in most cases.

Random example:

https://github.com/jdalrymple/gitbeaker/blob/ee1436e9634381d03a2c3ad9ca03de3901e65231/packages/rest/src/Requester.ts#L1-L135

In this file, there's some exported functions, some unexported functions, an exported constant... Basically, the same things you'd find in a class, except maybe a constructor.

While it would be possible to wrap the entire thing with class X {}, replace export function with public then function with private, sort it, then remove the class and change back the accessors, it would be much simpler if this extension could do it.

Please review closed issue #25

Disable alpha?

Is it possible to disable alphabetical sorting of methods? We like to group methods by usage (or by lifecycle order in Angular).

It's eating my types

Before:

import p5 from "p5";

export interface HasBoxSize {
  get boxHeight(): number;
  get boxWidth(): number;
}

export type HasId = { id: number | string };

export interface XBounds {
  get left(): number;
  get right(): number;
}

export interface YBounds {
  get top(): number;
  get bottom(): number;
}

export type Bounds = XBounds & YBounds;

interface Updatable {
  update(): void;
}

export interface Movable extends Updatable, HasVelocity {
  get position(): p5.Vector;
  get nextPosition(): p5.Vector;
}

export interface Drawable {
  draw(p5: p5): void;
}

type Coord = { x: number; y: number };

export type CoordOrVector = p5.Vector | Coord;

export interface HasArea {
  get area(): number;
}

export type BoxBounds = Bounds & HasArea;

export interface HasVelocity {
  velocity: p5.Vector;
}

export interface BoxCollidable extends BoxBounds, HasVelocity {
  get nextBounds(): BoxBounds;
}

After:

import p5 from "p5";

export interface HasBoxSize {
}

export type HasId = { id: number | string };

export interface XBounds {
}

export interface YBounds {
}

export type Bounds = XBounds & YBounds;

interface Updatable {
  update(): void;
}

export interface Movable extends Updatable, HasVelocity {
}

export interface Drawable {
  draw(p5: p5): void;
}

type Coord = { x: number; y: number };

export type CoordOrVector = p5.Vector | Coord;

export interface HasArea {
}

export type BoxBounds = Bounds & HasArea;

export interface HasVelocity {
  velocity: p5.Vector;
}

export interface BoxCollidable extends BoxBounds, HasVelocity {
}

It seems it doesn't understand property accessors in the interfaces....

Allow disabling function organization

I am only interested in class organization so that fields are in order. However the plugin also unconditionally organizes functions and variables now as well, which I do not wish to do.

It would be nice to have an option to disable function organization, e.g. tsco.disableFunctionOrganization or similar.

Do not indent #region / #endregion

Make the indentation configurable, or at least do not indent. It's easier (for me) to read.

Typescript 4.4 private identifiers & addPublicModifierIfMissing

The extension wants to add a public in front of class properties marked as private, which creates a typescript error.

export class Example {
 // This should not have public added
  #privateProperty = true; 
  // This one should have it added
  anotherProperty = false;
}

For the purposes of sorting, these act the same as private properties. Currently sorting has them being grouped together with the public properties

identify #endregion

Some regions are large, ex: // #region Public Methods (23)
Suggestion: identify end region. ex: // #endregion Public Methods (23)

Modifier "public" has to come before "readonly"

got readonly string properties, public gets inserted after readonly

make adding 'public' scope configurable

I like this extension's feature to alpha-sort all properties and functions.
I don't always want everything to be public.
Suggestion: make adding 'public' specifier configurable. Allow user to keep scope specifiers in code as written.

Setting to specify ordering inside modules

Thanks for #53!

The ordering inside modules is very different from the ordering inside classes.

Here's an example:

export class Tsco {
	private readonly privateProperties = "privateProperties"

	readonly publicProperties = "publicProperties"

	constructor() {
		this.privateMethods()
	}

	publicMethods() {
		this.privateMethods()
	}

	private privateMethods() {
		return this.privateProperties
	}
}

function privateMethods() {
	return privateProperties
}

export function publicMethods() {
	privateMethods()
}

const privateProperties = "privateProperties"
export const publicProperties = "publicProperties"

I would like for the properties inside a module to be sorted exactly the same as if it was inside of a class; properties at the top, constructors in the middle, methods at the bottom. Right now, we have constructors at the top, methods in the middle, properties at the bottom.

An ideal solution would be to have a setting, just like for classes, that determines what goes where.

Add blank line before properties, even when "useRegions" is set to false?

Hi,

Amazing extension, thank you very much for making this.

In our codebase we don't use regions (though we do group member types ofc), so "useRegions" is set to false.

So this code:

export class SomeClass {
	private y = 0
	public x = 0
}

Gets formatted into this (notice there is no blank line between the class header and the x property):

export class SomeClass {
	public x = 0

	private y = 0
}

But what I want it to look like is this (blank line on line 2):

export class SomeClass {

	public x = 0

	private y = 0
}

If I enable "useRegions" I get this:

export class SomeClass {
	// #region Properties (2)

	public x = 0

	private y = 0

	// #endregion Properties (2)
}

Which is kinda what I want, but without the regions.

Handle "override" keyword

Hi there,

I'm noticing that this is not handling the override keyword correctly. It will split the keyword away from its associated method e.g.

class X {
    public a() {}
}

export default class Test extends X {
    public override a() {}
}

When formatted, produces:

class X {
    public a() {}
}

export default class Test extends X {
    public override

    public a() {}
}

@Listeners should not be made public

public @HostListener('window:resize', ['$event'])
onResize(event?) {

...is invalid. causes errors:
[ts] Duplicate identifier 'public'.
...and...
[tslint] Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface. (member-ordering)"

Suggestion: test the organizer agains TSLint 1.0.39 or greater. TSLint has 8.9M downloads.
I really like this organizer and hope you continue to improve the product.

Missing public incorrectly added after static

The "public" modifier, that gets added when missing by default, was added between "static" and the property name.
It's supposed to be before static.

Note: can be disabled - #5, as can regions - thanks you for the nice extension :)

Is there any cli version for the same transformations?

Or is it possible to run commands from command line?

unicode gets messed up

got a string like "📋 Clipboard" which is getting messed up.

Still many thanks for the addon!
Might get myself into some pull requests some time.

Also reorganizes the ngoninit in angular applications

Hi!

I love this extension but there is one thing that totally frustrates me:
when the extension organize the file, it change also the place of the functions ngOnInit and ngOnDestroy of my angular app.
Would there be a way not to change the order of these functions in relation to the others? With the memberOrder for example?

Thank you in advance!

Run by Terminal & Add "publicImplementedMethods" for "tsco.memberOrder"

First thing I wanna say that your extension saved my life. It's unbelievable.

Thank you so much !

On the other hand, I hope you can implement 2 more features, there're practices & really needed.

1. Run by Terminal

• If I can combine your tool with pre-commit-hook, it will be awesome probably.

2. Add "publicImplementedMethods" for "tsco.memberOrder"

• I work as an Ionic Developer, so TypeScript is my right hand and the inheritance principle also. I need to order my life-cycle functions.

Eureka. You make my day

cluster property decorators together

Instead of producing this:

ComponentClassName = 'TtmDatagridComponent';
currentYear: number;
dialogHeader: string;
displayExportDialog: boolean;
errorMessage: string;
@Input() frameInfo: FrameInfo;
@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
ngClass_body = 'ngClass_body';
progressbarIsVisible = false;
progressbarLabel = 'Creating Test \'Midterm\'';
progressbarPercent = 63;
showemptymessage = true;
source: any = null;
subscription: any = null;
@ViewChild('tableData') tableData: Table;
@ViewChild(TtmDialogConfirmComponent) ttmDialogConfirmComponent: TtmDialogConfirmComponent;
@ViewChild(TtmDialogErrorComponent) ttmDialogErrorComponent: TtmDialogErrorComponent;
@ViewChild(TtmDialogImportComponent) ttmDialogImportComponent: TtmDialogImportComponent;

Produce this:

@Input() frameInfo: FrameInfo;
@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
@ViewChild('tableData') tableData: Table;
@ViewChild(TtmDialogConfirmComponent) ttmDialogConfirmComponent: TtmDialogConfirmComponent;
@ViewChild(TtmDialogErrorComponent) ttmDialogErrorComponent: TtmDialogErrorComponent;
@ViewChild(TtmDialogImportComponent) ttmDialogImportComponent: TtmDialogImportComponent;

ComponentClassName = 'TtmDatagridComponent';
currentYear: number;
dialogHeader: string;
displayExportDialog: boolean;
errorMessage: string;
ngClass_body = 'ngClass_body';
progressbarIsVisible = false;
progressbarLabel = 'Creating Test \'Midterm\'';
progressbarPercent = 63;
showemptymessage = true;
source: any = null;
subscription: any = null;

Note the extra line between decorators and the remainder property list.

formatting code with toStringTag Symbol fails

given the following class definition the organize operation fails.

export class MyClass {
    get [Symbol.toStringTag]() {
        return 'MyClass';
    }
}

The log:

[2020-11-27 12:59:25.892] [exthost] [error] TypeError: Cannot read property 'toString' of undefined
	at new GetterNode (c:\Users\cszol\.vscode\extensions\aljazsim.tsco-1.0.20\out\src\elements\getter-node.js:9:56)
	at Transformer.visitSyntaxTree (c:\Users\cszol\.vscode\extensions\aljazsim.tsco-1.0.20\out\src\transformer.js:69:64)
	at Transformer.visitSyntaxTree (c:\Users\cszol\.vscode\extensions\aljazsim.tsco-1.0.20\out\src\transformer.js:90:22)
	at Transformer.analyzeSyntaxTree (c:\Users\cszol\.vscode\extensions\aljazsim.tsco-1.0.20\out\src\transformer.js:25:18)
	at organizeTypes (c:\Users\cszol\.vscode\extensions\aljazsim.tsco-1.0.20\out\extension.js:241:52)
	at organize (c:\Users\cszol\.vscode\extensions\aljazsim.tsco-1.0.20\out\extension.js:101:22)
	at c:\Users\cszol\.vscode\extensions\aljazsim.tsco-1.0.20\out\extension.js:21:87
	at _executeContributedCommand (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:699:753)
	at _.$executeContributedCommand (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:700:104)
	at g._doInvokeHandler (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:876:926)
	at g._invokeHandler (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:876:618)
	at g._receiveRequest (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:875:252)
	at g._receiveOneMessage (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:874:6)
	at c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:872:136
	at l.fire (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:46:67)
	at v.fire (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:256:601)
	at c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:1066:179
	at l.fire (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:46:67)
	at v.fire (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:256:601)
	at t.PersistentProtocol._receiveMessage (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:261:629)
	at c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:258:708
	at l.fire (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:46:67)
	at p.acceptChunk (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:253:989)
	at c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:253:341
	at Socket.t (c:\Users\cszol\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:263:276)
	at Socket.emit (events.js:223:5)
	at addChunk (_stream_readable.js:309:12)
	at readableAddChunk (_stream_readable.js:290:11)
	at Socket.Readable.push (_stream_readable.js:224:10)
	at Pipe.onStreamRead (internal/stream_base_commons.js:181:23) tsco.organize

Cannot organize a file a second time

Cannot 're-organize' a file. Duplicate #region and #endregion tags are created when an organized file is organized.

Feature Request | Create CLI Runnable Package

For my projects, I like to use lint-staged to run linters and formatters on affected files on commit. It would be great to be able to add this utility into that pipeline. To do so, we would need to have a CLI runnable npm package built that can be called on demand (e.g. like organize-imports-cli)

Feature request: Setting for disabling/enabling automatic sorting by name

The organizing of member groups is absolutely great, until you notice that the fields/properties defined in interfaces/types get automatically sorted in ascending fashion, by name.

For example:

// This is the way I'd wish for the following interface to remain written
interface Example {
    id: string;
    name: string;
    description: string;
    creds: string[];
}

// This is the result from the extension, after saving the file:
interface Example {
    creds: string[];
    description: string;
    id: string;
    name: string;
}

It would be very very helpful to have control over this feature --the automatic sorting of fields/properties pretty much obligated me to disable the extension.

Thank you for your time!

@NgModule is defined before @Component

@NgModule must be defined AFTER @component to avoid undefined symbols.
Example:

@component({
selector: 'ttm-pickList',
templateUrl: 'picklist.html',
styleUrls: ['picklist.css',
],
})
export class TtmPickList implements AfterViewChecked, AfterContentInit, OnInit {
...
}

@NgModule({
imports: [
CommonModule,
ButtonModule,
SharedModule,
NgToggleModule,
],
exports: [
TtmPickList,
SharedModule
],
declarations: [
TtmPickList
]
})
export class PickListModule { }

When @NgModule (and exported symbols) are defined in @component and the order is as currently implemented, then symbol 'TtmPickList' is undefined. The user must manually relocate the @NgModule class/code after @component.

Would be great if it can read ordering from .eslintrc.js

Thank you for this extension. Saved me a lot of time already.

Would be a killer feature if it can infer members ordering from eslint/tslint (specifically from member-ordering rule)

if not present it could use the default rule if @typescript-eslint plugin is installed

Never wrote vscode extension, but can help for beta testing.

<tab>public conflicts with popular linters

popular linters (TSLint) marks all tab characters as errors.
Suggestion: a configuration setting to prepend 'public' with tab or n spaces.

Option to put constructor before methods

Great extension, very helpful.

Could we have some options to control the ordering of members, or at least to put the constructor before methods.

tsLint insists on the constructor being before public methods and I prefer this convention so don't want to turn off the rule.

I have always organised my code like this regardless of language and would like to be able to control the order.

private fields
constructor
public fields/properties
public methods
private methods

Happy to look at a creating a PR if you prefer that approach.

Skip a file

Is it possible to skip a file from organization? There are some files that I like to organize and I don't want them to be reorganized automatically (I set the class organizer to run on save).

Alternatively, if I can skip specific interfaces then that would be helpful. I have database models defined as interfaces. This extension sorts them in alphabetical order which makes it hard to follow. I want to group fields together, but can't figure out how to do that.

Deletes all regions

If I configure the extension not to use regions but then add my own regions, the extension deletes them

commented-out property not recognized

when functions and properties are commented out, the first property is not recognized as being commented.

public // tick_then_delay = 200;
// tick_then_before_delay = 220;

User must edited code to remove 'public' descriptor.
Same for functions:
public // schedules a view refresh to ensure display catches up
// tick_then(fn: () => any) {
// this.curr_tick = Date();
// if (this.curr_tick < this.prev_tick + this.tick_then_delay) {
// return;
// }
// this.prev_tick = this.curr_tick;
// console.log('TtmDashboardComponent: tick_then()');
// setTimeout(fn, 100);
// }

create a cli tool for usage outside of VSCODE

Sorting should respect custom regions

I noticed that you can make tsco create regions for different member types. Which is great, but it would be nice, if the extension would have the capability to also respect custom regions. Somtimes I want to group specific types of methods inside of a region and have them show up on top of all the other class methods. Is that possible? For example, in angular I wrap my hooks inside of a region and I want them to always be on top of my other methods. I don't believe that that is currently working, is it?

`
/* #region hooks */
ngOnDestroy() {
this.subscriptions.forEach((sub) => sub.unsubscribe());
}

ngOnInit() {
this.initializeEmptyForm();
this.initLoadingSubscription();
...
}
/* #endregion */

//all other methods here....
`

getters/setters are deleted when organized

My Vs code setup is as below,

Version: 1.41.1 (system setup)
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T14:58:56.166Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 6.1.7601

My TypeScript Class Organizer version is 1.0.15.

The problem that I am facing is when I organize a file it seems to delete any getters or setters for some reason.

Before Organize File

export class TestClass {
  name: string;
  _style: any;
  constructor() {
    this.name = 'TestName';
  }

  // NOTE: getters and setters are deleted when file is organised
  get style() {
    return this.style
  }

  // NOTE: getters and setters are deleted when file is organised
  set style(style: any) {
    this._style = style
  }

  private _somePrivateMethod(): void {
    // Does some private stuff
  }

  public APublicMethod() {
    return 'This is a test class to see file organisation'
  }

  protected AProtectedMethod() {
    return 'It can be accessed by the derived classes'
  }
  
}

After Organize File

export class TestClass {
  // #region Properties (2)

  public _style: any;
  public name: string;

  // #endregion Properties (2)

  // #region Constructors (1)

  constructor() {
    this.name = 'TestName';
  }

  // #endregion Constructors (1)

  // #region Public Methods (1)

  public APublicMethod() {
    return 'This is a test class to see file organisation'
  }

  // #endregion Public Methods (1)

  // #region Protected Methods (1)

  protected AProtectedMethod() {
    return 'It can be accessed by the derived classes'
  }

  // #endregion Protected Methods (1)

  // #region Private Methods (1)

  private _somePrivateMethod(): void {
    // Does some private stuff
  }

  // #endregion Private Methods (1)
}

Order functions based on their dependancies not by name.

Currently, functions are being ordered by name, this disrupts how a code being used/read. now need to go up and down in a file to maintain the functions. Though it's doable, it's not favorable.

If it's doable, I prefer something like codmaid. the order is based on the dependency and not the name. The methods of least dependency will be at the top and the rest follows.

or one option that lets the user choose the order-algorithm or disable it.

Organizer does not work within *.spec.ts file

Hello team, I see that the extension does not work for all ts files. For example it does not work in the *.spec.ts files of Angular Unit Tests

Adding Config to Remove Regions, etc

I have had this setup before to not add public and hide regions, etc, I cannot seem to get it right, can you give me a clear example of how to structure the json please?

Cannot organize a file: "command 'tsco.organize' not found"