order-in-components.md

ember/order-in-components

🔧 This rule is automatically fixable by the --fix CLI option.

Note: this rule will not be added to the recommended configuration because it enforces an opinionated, stylistic preference.

Configuration

Name	Type
order	Array

const rules = {
  'ember/order-in-components': [
    2,
    {
      order: [
        'spread',
        'service',
        'property',
        'empty-method',
        'single-line-function',
        'multi-line-function',
        'observer',
        'init',
        'didReceiveAttrs',
        'willRender',
        'willInsertElement',
        'didInsertElement',
        'didRender',
        'didUpdateAttrs',
        'willUpdate',
        'didUpdate',
        'willDestroyElement',
        'willClearRender',
        'didDestroyElement',
        'actions',
        'method',
      ],
    },
  ],
};

If you want some of properties to be treated equally in order you can group them into arrays, like so:

order: [
  'service',
  'property',
  ['single-line-function', 'multi-line-function'],
  'observer',
  'init',
  'didReceiveAttrs',
  'willRender',
  'willInsertElement',
  'didInsertElement',
  'didRender',
  'didUpdateAttrs',
  'willUpdate',
  'didUpdate',
  'willDestroyElement',
  'willClearRender',
  'didDestroyElement',
  'actions',
  ['method', 'empty-method'],
];

Custom Properties

If you would like to specify ordering for a property type that is not listed, you can use the custom property syntax custom:myPropertyName in the order list to specify where the property should go.

Additional Properties

You can find the full list of properties in property-order.js.

Description

You should write code grouped and ordered in this way:

1. Services
2. Default values
3. Single line computed properties
4. Multiline computed properties
5. Observers
6. Lifecycle Hooks (in execution order)
7. Actions
8. Custom / private methods

Examples

const {
  Component,
  computed,
  inject: { service },
} = Ember;
const { alias } = computed;

export default Component.extend({
  // 1. Services
  i18n: service(),

  // 2. Properties
  role: 'sloth',

  // 3. Empty methods
  onRoleChange() {},

  // 4. Single line Computed Property
  vehicle: alias('car'),

  // 5. Multiline Computed Property
  levelOfHappiness: computed('attitude', 'health', function () {
    const result = this.attitude * this.health * Math.random();
    return result;
  }),

  // 6. Observers
  onVehicleChange: observer('vehicle', function () {
    // observer logic
  }),

  // 7. Lifecycle Hooks
  init() {
    // custom init logic
  },

  didInsertElement() {
    // custom didInsertElement logic
  },

  willDestroyElement() {
    // custom willDestroyElement logic
  },

  // 8. All actions
  actions: {
    sneakyAction() {
      return this._secretMethod();
    },
  },

  // 9. Custom / private methods
  _secretMethod() {
    // custom secret method logic
  },
});

Help Wanted

Issue	Link
❌ Missing native JavaScript class support	#560