order-in-components.md

order-in-components

🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

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

Configuration

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 here.

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