正确的 ES6 导入缩进答案

【问题标题】：Proper ES6 Import Indentation正确的 ES6 导入缩进
【发布时间】：2017-05-27 15:07:23
【问题描述】：

我应该如何正确缩进一个非常大的 es6 import 语句？是否有任何最佳实践/风格指南？

import { checkOldPassword, changeAddress, insertAddress, deleteAddress, changeEmail, changePassword, getCountries } from '../../actions/userActions.js'

我已经通过 AirBnb 样式指南研究了 react，但它似乎并没有解决问题。

【问题讨论】：

标签： reactjs ecmascript-6 redux

【解决方案1】：

我通常总是使用尾随逗号，就像用于多行对象、数组和解构一样，例如

import { 
    checkOldPassword, 
    changeAddress, 
    insertAddress, 
    deleteAddress, 
    changeEmail, 
    changePassword, 
    getCountries,
} from '../../actions/userActions.js';

这也是in the AirBnB style guide 定义的格式。

【讨论】：

接受，因为您提供了对样式指南的参考；) 非常感谢。
getCountries 后面真的要逗号吗？
@Sulthan 一些风格指南（如 airbnb）推荐它，因为它会导致更清晰的git 差异，就像您想添加新的导入一样。这两种方式都不是什么大问题。
@saadq 谢谢，现在我明白了原因。我实际上认为尾随逗号是非法的，但显然情况并非如此。
JS 越来越倾向于允许尾随逗号。自 ES5 以来，对象和数组的尾随逗号已被允许，ES6 的名称模块列表也允许它们，ES8 将包括函数调用和参数列表的尾随逗号。

【解决方案2】：

您可以为每一行使用新行，而不是全部写在一行中，如下所示：

import { 
    checkOldPassword, 
    changeAddress, 
    insertAddress, 
    deleteAddress, 
    changeEmail, 
    changePassword, 
    getCountries } from '../../actions/userActions.js';

Check this.

我认为这就是你想要的，如果它不能回答你的问题，请告诉我。

【讨论】：

【解决方案3】：

对于这种情况，我更喜欢“榆树风格”的缩进：

import { checkOldPassword
    , changeAddress
    , insertAddress, 
    , deleteAddress
    , changeEmail
    , changePassword 
    , getCountries 
} from '../../actions/userActions.js'

乍一看可能看起来很奇怪，但很酷 - 它允许使用编辑器的 add row / remove row 命令添加/删除导入的属性。我是 Vim 用户，发现这非常方便。

【讨论】：

并非如此，它只是将缺少的逗号从末尾移到开头。