时间戳

首页 > 解决方案 > eslint sort-imports 混合单个和多个

reactjs - eslint sort-imports 混合单个和多个

问题描述

我有一个带有 eslint 的 CRA 应用程序设置，我使用 vscode 使用sort-imports扩展。除了sort-imports规则之外，所有 linting 似乎都按我的意愿工作。它似乎允许混合single和multiple进口。

这是我的 .eslintrcsort-imports规则：

"sort-imports": [
  "error",
  {
    "memberSyntaxSortOrder": [
      "all",
      "single",
      "multiple",
      "none"
    ],
    "allowSeparatedGroups": true
  }
],

还有一个错误的例子：

import { Readonly } from "components/Form/Readonly";
import { Summary } from "components/Heading/Summary";
import axios from "axios";
import { config } from "system/config";
import qs from "qs";
import { useLoader } from "components/Loading";

sort-imports 喜欢这个并且 eslint 也不抱怨它。我错过了什么，或者 eslint 应该抱怨这个吗？明明是混着single吧multiple？

如果我将其更改为我想要的方式：

import axios from "axios";
import qs from "qs";

import { Readonly } from "components/Form/Readonly";
import { Summary } from "components/Heading/Summary";
import { config } from "system/config";
import { useLoader } from "components/Loading";

eslint 似乎没有抱怨，但 sort-imports 会将它恢复到上面的样子。

所以我想我的问题在于 sort-imports 扩展......但我仍然认为 eslint 应该抱怨我混合这些导入。

标签： reactjstypescriptsortingeslinttypescript-eslint

解决方案

虽然文档并不完全清楚 - 从我可以看出规则的来源（https://github.com/eslint/eslint/blob/896273f9d75c973ce2c7cc25580ae667a10ec6f9/lib/rules/sort-imports.js#L77-L99） ,import { foo } from 'module'被视为“单一”进口，因为它进口一件事 - 与import def from 'module'“单一”进口相同。

import { foo, bar } from 'module'是“多个”，因为它导入多个东西。

推荐阅读