prettier-plugin-organize-class-members weekly downloads statistics

Prettier Plugin: Organize Class Members

Organize your Javascript and Typescript classes to keep them consistent.

A plugin that makes Prettier organize your Javascript and Typescript class members.

Features

• 👍 Supports .js, .jsx, .ts, .tsx files.
• 🚀 Works out of the box - zero-config required.
• 💪 Customizable - control exactly how your classes are organized.
• 🤓 No more messy diffs or merge conflicts from people using different class orderings strategies.
• 🤯 Never worry about manually ordering class members again
• 😌 Safe - modifying the order of class members has no effect on code execution.

Caveat

This plugin inherits, extends, and overrides the built-in Prettier parsers for babel and typescript. Therefore it's incompatible with other plugins that do the same. See the troubleshooting section below for more details.

Stability

This plugin is new and currently in beta. It has not been extensively tested in large complex projects. Therefore if you are using this plugin for the first time, please run prettier in dry run mode or in a state where you can easily rollback.

Installation

npm install --save-dev prettier-plugin-organize-class-members

yarn add --dev prettier-plugin-organize-class-members

prettier is a peer dependencies, so make sure you have those installed in your project.

Usage

The plugin will be loaded by Prettier automatically. No configuration needed.

Files containing the substring // organize-class-members-ignore or // tslint:disable:organize-class-members are skipped.

Configuration

This plugin works out of the box and requires no configuration to get started. You may customize how this plugin organizes your classes using the options below in your prettier config file.

Note if you are using a .prettierrc.cjs, you may add the following line to get type support for the options:

// .prettierrc.cjs

module.exports = {
    plugins: [require.resolve('prettier-plugin-organize-class-members')],
    // your other prettier options
}

Options

classSectionOrder

Details: Specify the order of various sections in your classes.
Type: string[]

Supported values:

1. constructor - Matches the constructor function of the class.
2. methods - Matches all non-static methods.
3. staticMethods - Matches all static methods.
4. properties - Matches all non-static declared properties/fields in the class.
5. staticProperties - Matches all static declared properties/fields in the class.

Default Value: ['staticProperties','staticMethods','properties','constructor','methods']

If you modify this option, you must follow these rules:

1. Each value must be used.
2. No duplicates or unsupported strings may be used.

// .prettierrc.cjs

module.exports = {
    // invalid ❌ - missing staticProperties and methods
    classSectionOrder: ['constructor', 'staticMethods', 'properties'],
    
    // invalid ❌ - constructor is duplcated
    classSectionOrder: ['constructor', 'constructor', 'properties'],

    // invalid ❌ - unsupported values are used
    classSectionOrder: ['someRandomValue', 'someOtherRandomValue', 'properties'],

    // valid ✅ 
    classSectionOrder: ['constructor', 'methods', 'staticMethods', 'properties', 'staticProperties']
}

---

classAccessibilityOrder

Details: Within a section, specify the order of members (methods and properties) by accessibility.
Type: string[]

Supported values:

1. private - Matches private members. The following members are considered private.
   1. Those preceded by the typescript private keyword.
   2. Those preceded with a #. See here for more details.
   3. Those preceded with an _ (conventional private members). See here for more details.
2. protected - Matches all protected members. The following members are considered protected.
   1. Those preceded by the typescript protected keyword.
3. public - Matches all public members. The following members are considered public.
   1. Those preceded by the typescript public keyword.
   2. Those preceded by neither _, #, private, nor protected.

Default Value: ['public','protected','private']

If you modify this option, you must follow these rules:

1. Each value must be used.
2. No duplicates or unsupported strings may be used.

// .prettierrc.cjs

module.exports = {
    // invalid ❌ - missing public
    classAccessibilityOrder: ['private', 'protected'],
    
    // invalid ❌ - private is duplcated
    classAccessibilityOrder: ['private', 'private', 'protected'],

    // invalid ❌ - unsupported values are used
    classAccessibilityOrder: ['someRandomValue', 'someOtherRandomValue', 'private'],

    // valid ✅ 
    classSectionOrder: ['private', 'public', 'protected']
}

---

classGroupOrder

Details: Within levels of accessibility, divide the members into groups. For example getter and setter methods can be grouped together.
Type: string[]

Supported values:

1. gettersAndSetters - Matches getter and setter methods. A getter or setter is one of the following:
   1. A method with the word get or set at the start (ex: getDog() {})
   2. A typescript getter and or setter. See here for more details.
2. everythingElse - Matches all remaining members that could not be assigned to a group.

Default Value: ['everythingElse']

If you modify this option, you must follow these rules:…