Ordering Imports

[Supun Budhajeewa]

I used to order C#'s "using"s and PHP's "use"s in the alphabetical order.

It worked well because one "use/using" statement imported one class or namespace.

However, in TypeScript's "imports" are not so. We can import multiple stuff from a single file.

What are the best practices to order "imports"?

---

Were source files mentioned at the beginning of the import, instead of the end, I could've used based on that.

[Lucas Lacroix]

You can order the imports in any way you want.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

[Supun Budhajeewa]

On Thursday, July 21, 2016 at 7:03:57 PM UTC+5:30, Lucas Lacroix wrote:

You can order the imports in any way you want.

Please note that I am looking for "best practices".

[Lucas Lacroix]

I do not believe there are any best practices - Google turns up nothing and if it's not in Google, it doesn't exist (a little humor there). The ordering of the imports has no effect on the application and, IMO, it does not increase readability/understanding when you enforce an arbitrary sort on the imports.

The only thing I do is split the imports into two groups, placing external modules first like so:

import {Injectable, provide} from '@angular/core';

import {Http} from '@angular/http';

import {MyComponent} from './my-component';

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Supun Budhajeewa]

On Thu, Jul 21, 2016 at 7:23 PM, 'Lucas Lacroix' via AngularJS <ang...@googlegroups.com> wrote:

I do not believe there are any best practices - Google turns up nothing and if it's not in Google, it doesn't exist (a little humor there).

Well, if its not there, why not create it? 😄

 

The ordering of the imports has no effect on the application and, IMO, it does not increase readability/understanding when you enforce an arbitrary sort on the imports.

I think it improves readability, as it makes it easier to locate some package being imported.

 

The only thing I do is split the imports into two groups, placing external modules first like so:

import {Injectable, provide} from '@angular/core';

import {Http} from '@angular/http';

import {MyComponent} from './my-component';

I do this already.

I think ordering by alphabetical order is the natural step forward from here.

--

Supun Budhajeewa
---

Website: http://budhajeewa.com

Blog: http://blog.budhajeewa.com

Microblog: http://mblog.budhajeewa.com

Google+: http://j.mp/gplusbudhajeewa

Twitter: https://twitter.com/budhajeewa

Facebook: https://facebook.com/budhajeewa

[Sander Elias]

Hi Supun,

there are best practices in pace for this. Read to the ng-2 styleguide, it's clearly specified in there. Those are on the anguar.io site. Sorry, no time to look up an link for you now.

Regards

Sander

[Sander Elias]

Here is a link to the style-guide

[Supun Budhajeewa]

Thanks for the reference Sander.

I see that the Style Guide recommends to "[order] imported assets alphabetically.".

But one curly brace can include multiple assets. Eg:

import { AntMan, Zoro } from './heroes';

import { Bat } from './equipments';

I feel that Zoro should not be included before Bat.

What do you think of instead doing this:

import { AntMan } from './heroes';

import { Bat } from './equipments';

import { Zoro } from './heroes';

On Fri, Jul 22, 2016 at 7:39 PM, Sander Elias <sande...@gmail.com> wrote:

Here is a link to the style-guide

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Vin8cQxumdA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Lucas Lacroix]

This section says it all: https://angular.io/docs/ts/latest/guide/style-guide.html#!#03-06

Order your import statements alphabetically by module name. So, your 'import ... "./heroes";' line should come after your 'import ... "./equipment";' line.

Order the destructured imported assets within those lines alphabetically.

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

[Supun Budhajeewa]

I've missed that line.

Sounds good.