使用cra对react中的导入排序

Question

我正在尝试更新项目的配置以对导入顺序进行排序。我使用的是create-react-app，并且一直遵循本文中的说明。以下是我迄今为止所做的：

1. 运行yarn add eslint-plugin-import -D
2. 在我的应用程序的src文件夹中添加了一个.eslintrc.js
3. 添加了文章中提到的以下配置：

module.exports = {
extends: "react-app",
plugins: ["eslint-plugin-import"],
"import/order": [
"error",
{
groups: ["builtin", "external", "internal"],
pathGroups: [
{
pattern: "react",
group: "external",
position: "before",
},
],
pathGroupsExcludedImportTypes: ["react"],
"newlines-between": "always",
alphabetize: {
order: "asc",
caseInsensitive: true,
},
},
],
};

我已经编写了以下示例组件，并更改了import语句的顺序，以检查这是否有效，但当我保存订单时，没有更新：

Sample.js

import { PropTypes } from "prop-types";
import React from "react";
const Sample = () => <div>Hello</div>;
export default Sample;

保存后预期

Sample.js

import React from "react";
import { PropTypes } from "prop-types";
const Sample = () => <div>Hello</div>;
export default Sample;

我也尝试过simple-import-sort，但我不知道如何配置它。如何配置我的项目，使import语句自动保持有序？

Answer 1

在pathGroups中，变化反应为built，而不是external:

"pathGroups": [
{
"group": "builtin",
"pattern": "react",
"position": "before"
},
{
"group": "external",
"pattern": "@/**",
"position": "before"
}]