ESLint 导入排序分组答案

【问题标题】：ESLint import sort groupingESLint 导入排序分组
【发布时间】：2020-03-30 01:02:19
【问题描述】：

在我的节点项目中，我使用 ESLint。我想对导入进行排序。我配置了它，现在一切正常。但是，我不能对导入进行分组和排序。

import request from 'request';

import { asyncHandler } from 'middleware';
import { githutOptions } from 'constants/options.constant';

import profileService from 'services/profile.service';

在这里，我收到一条警告，提示 Imports 应该按字母顺序排序。 在第二行。 (asyncHandler)

为什么不根据分组进行排序？在我使用过的另一个项目中，如果有多个分组导入，则仅在这些组内排序。

但是在这里，即使我对这些导入进行了分组，它也会考虑整个文件，所以 asyncHanler 应该作为第一行。我在这里想要的是仅在组内对导入进行排序。

我怎样才能做到这一点？

这些是我对导入排序的 eslint 规则。

 "sort-imports": ["error", {
      "ignoreCase": false,
      "ignoreDeclarationSort": false,
      "ignoreMemberSort": false,
      "memberSyntaxSortOrder": ["none", "all", "single", "multiple"]
  }]

【问题讨论】：

标签： javascript node.js reactjs react-native eslint

【解决方案1】：

这正是ignoreDeclarationSort 所做的：如果是true，那么ESLint 将忽略import 行。如果ignoreMemberSort 是false，它将检查命名导入的顺序。

所以

 "sort-imports": ["error", {
      "ignoreCase": false,
      "ignoreDeclarationSort": true,
      "ignoreMemberSort": false,
      "memberSyntaxSortOrder": ["none", "all", "single", "multiple"]
  }]

应该适合你。

【讨论】：

【解决方案2】：

eslint 在7.5.0 版本中使用sort-imports 的allowSeparatedGroups 选项添加了您要查找的内容

cf:

文档：https://eslint.org/docs/rules/sort-imports#allowseparatedgroups
拉取请求：https://github.com/eslint/eslint/pull/13455

【讨论】：