使用cras在react中导入排序顺序

Question

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

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语句自动保持顺序？