New rule: import-ordering

[adidahiya]

^{Update July 1, 2016}

This rule was released as "ordered-imports" in TSLint v3.13.0.

^{Update Jun 14, 2016}

Import ordering

Option: check-groups enforces formatting imports into groups (separated by single newlines) in a certain order:

1. third-party imports (standard NPM dependencies)
2. NPM-scoped imports
3. relative path imports

Option: alphabetize enforces alphabetic ordering of from clause

• if check-groups is enabled, then order is enforced within each group
• if check-groups is not enabled, then enforce overall ordering

[panuhorsmalahti]

👍.

[aeisenberg]

Some more suggestions here:

1. Alphabetic ordering of from clause
2. Remove unused import statements (maybe this should be a different rule, though)
3. Extra newline between relative path imports and absolute path imports

[adidahiya]

good ideas @aeisenberg. unused imports should be covered by no-unused-variable, but the error message should be improved: #550

[rjokelai]

👍

[danvk]

Here's a custom rule I put together that does something like this:
https://gist.github.com/danvk/8ddaddaf291769b9bcfa8d4504742150

• The A, B, C in import {A, B, C} from 'foo' must be alphabetized.
• Import sources within a group must be alphabetized.
• A blank line creates a new "group" of imports.

[danvk]

FYI @adidahiya I've sent out #1325 which implements something along these lines.

[markwongsk]

Where would ordering of the ImportClause (eg default imports, wildcard imports, es6-imports) lie in this proposal? It doesn't seem to fit into alphabetize (they are all categories in of themselves), but having to manually group all of them manually seems a bit too much of a waste of real estate.

[adidahiya]

they are all categories in of themselves

We might differ in opinion on this -- I personally don't think default imports / namespace imports / etc. should be treated any differently from each other, so therefore you shouldn't worry about grouping them. There's not much that's semantically related about the import style, so I'd rather go by alphabetization based on module name.

Maybe an additional option called group-by-import-style would address your use case.

[markwongsk]

That sounds fair. I think we can do with the general alph within groups.

[EugeneSnihovsky]

Hi guys. Is there a way to disable "Import sources within a group must be alphabetized" option in this rule? It will be helpful for:

1. Angular 2 code style: imports from angular core should be before application imports. And they not always alphabetized with other imports.
2. In unit tests last import is tested instance. And it not always alphabetized with other imports.

Thanks for your work and any help :)

[danvk]

@EugeneSnihovsky If I want to separate imports in that way, I usually put them into multiple groups separated by blank lines, just like you would with PEP8.

import * as fs from 'fs';
import * as os from 'os';

import * as bar from './bar';
import * as foo from './foo';

[eriktim]

I've created a custom rule to check for such a default groups layout, i.e.

import * as fs from 'fs'; // libraries

import {foo} from '../foo'; // parent directories

import {bar} from './bar'; // current directory
import {baz} from './baz';

Edit: see pull request.

[tonystaark]

For the error that is triggered by not following separated by single newlines, please throw error message specific to that instead of Import sources within a group must be alphabetized. , which is very misleading that makes developers bewildered by hours trying to debug.

[JoshuaKGoldberg]

@tonystaark if you think that's bewildering, imagine learning that TSLint is deprecated: #4534. We highly recommend you stop using this code. 😄