ember-cli / eslint-plugin-ember

An ESLint plugin that provides set of rules for Ember applications based on commonly known good practices.
MIT License
259 stars 201 forks source link

Ordering imported modules #238

Open pablogravielseo opened 6 years ago

pablogravielseo commented 6 years ago

Guys, as I was working on my current job, I faced so many times about "ordering imported modules" issue in "routes", "controllers" and "components" files. In scenario like this route:

import Route from '@ember/routing/route';
import { get, getProperties, getWithDefault, set, setProperties } from '@ember/object';
import { hash, allSettled, Promise } from 'rsvp';
import { inject as service } from '@ember/service';
import { isBlank } from '@ember/utils';
import { assign } from '@ember/polyfills';
import { task, timeout } from 'ember-concurrency';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
import LastLocationRestorableMixin from '../mixins/components/last-location-restorable';
import OPTIONS from '../pods/map/configurations/options';
import MapUtils from '../utils/map';
import ENV from '../config/environment';
import $ from 'jquery';
import _ from 'lodash';

In some files I ordered in some ways and in other files I ordered in another ways, I have switched many times in same files too, I felt a lack of ordering pattern like "eslint rules" have for "models", "routes", "controllers" and "components". I searched about this topic from the rules (https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules) but I didn't found a kind of rule like this, only have ordering for "models", "routes", "controllers" and "components", but nothing about "modules imports" ordering.

I would like to propose the following ordering, for example, in "Route":

  1. All ember core packages.
  2. All ember packages extended/created/customized (by the organization).
  3. All third party ember addons.
  4. All third party libs non ember addons.

Example:

  1. Domain object (If the file is a "route", import Route from '@ember/routing/route';).
  2. @ember/object (and object modules in the order they are presented, https://www.emberjs.com/api/ember/release/modules/@ember%2Fobject).
  3. @ember/utils
  4. @ember/polyfills
  5. @ember/service
  6. rsvp others... -----------> At this stage is about "all ember core packages".
  7. models (from "models" folder like import Question from '../models/question';)
  8. mixins (from "mixins" folder like import LastLocationRestorableMixin from '../mixins/components/last-location-restorable';)
  9. utils (from "utils" folder like import MapUtils from '../utils/map';)
  10. ENV (import ENV from '../config/environment';)
  11. Domain object options/configurations (like import OPTIONS from '../pods/map/configurations/options'; import demographicQuestions from './demographic-questions'; ) others... -----------> At this stage is "all ember packages extended/created/customized by us".
  12. third party ember addons like: import { task, timeout } from 'ember-concurrency'; import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'; others... -----------> At this stage is "all third party ember addons".
  13. third party non ember addons like: import $ from 'jquery'; import _ from 'lodash'; others... -----------> At this stage is "all third party libs non ember addons".

There is some ordering proposition already? Or there is some suggestion? What do you think guys?

ctjhoa commented 4 years ago

https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md can give some clues