Angular 2中导入语句的顺序

Question

Angular风格指南中提到了导入行间距的问题：

• 考虑在第三方导入和应用程序导入之间留一个空行。
• 考虑按模块字母顺序列出导入行。
• 考虑按字母顺序列出解构导入的符号。
• 为什么？空行将您的内容与他们的内容分开。
• 为什么？按字母顺序排列使阅读和定位符号更容易。

查看许多Angular项目，包括Angular本身，惯例是首先导入Angular（@angular）模块，然后是第三方模块（例如AngularFire2），最后是我们自己的模块（服务、组件等），例如./some-service.ts。

同样，看起来惯例是先导入服务，然后是模型，再然后是组件。

但是接口和管道等呢？导入“无名”或通配符模块的惯例是什么？例如Firebase SDK或RxJs运算符？

例如：

导入RxJs运算符的示例服务

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

import { AngularFireAuth } from 'angularfire2/auth';
import {
  AngularFireDatabase,
  FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
import 'rxjs/add/operator/take';
...

或者

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

import {
  AngularFireDatabase,
  FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';
// `GridMetadata` is an Interface
import { GridMetadata } from './grid-metadata';
...

- Jonathon Oates

---

这不是SO的问题。如果样式指南对此没有任何说明，那就由您自行决定。我个人会按字母顺序维护导入，核心依赖项（@angular和rxjs）放在其他第三方库之前，而第一方库则放在最后。 - Estus Flask

Answer 1

实际上，通过查看Angular代码库并更好地理解指南，有一个答案。

"考虑在第三方导入和应用导入之间留下一个空行。"

这只需要一个示例来解释：

// Core imports
import { TestBed, async, inject } from '@angular/core/testing';

// Third party imports
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';

// Application imports
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';

考虑按模块字母顺序列出导入行。

将“modules”视为“from”之后的部分。这些模块包含要导入的符号。

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

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';

符号是什么并不重要；重要的是按照模块字母顺序排序导入行。例如：

1. angularfire2/auth
2. firebase/app
3. rxjs/Rx
4. rxjs/add/observable/of
5. rxjs/add/operator/catch

在Angular代码库中，小写字符在大写字符之后列出，因此'rxjs/Rx'在'rxjs/add/observable/of'和'rxjs/add/operator/catch'之前。

"考虑按字母顺序列出解构导入的符号。"

import { TestBed, async, inject } from '@angular/core/testing';

import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';

将"destructured imported symbol"视为从其父模块中提取的导出符号。在此示例中，AngularFireAuth、Observable、TestBed、async和inject都是解构导入的符号。

同样，顺序是按字母顺序排列的，先大写字母，然后是首字母大写，最后是小写字母。以下是来自Angular代码库的一个很好的示例：

import {CUSTOM_ELEMENTS_SCHEMA, Compiler, Component, Directive, Inject, Injectable, Injector, Input, NgModule, Optional, Pipe, SkipSelf, ɵstringify as stringify} from '@angular/core';

看 Angular 代码库时，并没有明确的导入服务、管道、模型、指令或组件等的特定顺序。

请注意，父目录中的模块会在更靠近被导入到的模块之后导入，例如：

import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
import { abc } from '.../abc';

- Jonathon Oates

---

有没有可用的工具可以自动实现这种行为？ - Zozo

@Zozo：是的，你可以尝试使用https://palantir.github.io/tslint/rules/ordered-imports/。这是一个tslint规则，用于对导入进行排序。在您的tslint.json中添加类似于“ordered-imports”：[true，{“grouped-imports”：true}]的内容应该就足够了。 - biolauri