ESlint 缩进导入/导出语句答案

【问题标题】：ESlint indent import / export statementsESlint 缩进导入/导出语句
【发布时间】：2020-05-13 02:39:50
【问题描述】：

我使用WebStorm 作为 IDE，它支持indent import / export statements 的以下格式选项。

对应的选项可以在： 文件 > 设置 > 编辑器 > 代码样式 > JavaScript > 换行和大括号 > ES6 导入/导出

如果选中选项，结果是：

import {Dropdown}     from '../drop-down.ts';
import AwesomeLibrary from 'library';
import * as core      from 'core/all';

如我们所见，每个import 语句都与最长的语句对齐，在本例中为import AwesomeLibrary from 'library';。

export 语句的计数相同：

export *          from './lib'
export foo as bar from './hello'

我只发现了规则indent.ImportDeclaration，在this PR 中添加并在this 问题中提到。但是这条规则只处理这些 import 语句中的缩进：

import {
  Foo,
  Bar,
  Baz
} from 'lib'

是否有可用于实现上述意图/格式的规则？

【问题讨论】：

标签： webstorm eslint

【解决方案1】：

我已经写了一个plugin 来做到这一点。

$ npm install eslint-plugin-align-import --save-dev

在你的.eslintrc:

{
    "plugins": [
        "align-import"
    ],
    "rules": {
        "no-multi-spaces": ["error", {"exceptions": {"ImportDeclaration": true}}],
        "align-import/align-import": "error"
    }
}

必须关闭 no-multi-spaces 才能进行导入声明。

【讨论】：