时间戳

首页 > 解决方案 > 使用 cra 在反应中排序顺序导入

reactjs - 使用 cra 在反应中排序顺序导入

问题描述

我正在尝试更新我的项目配置以对导入顺序进行排序。我正在使用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语句的顺序以检查这是否有效，但是当我保存时，顺序没有被更新：

示例.js

import { PropTypes } from "prop-types";
import React from "react";

const Sample = () => <div>Hello</div>;

export default Sample;

保存后预计

示例.js

import React from "react";

import { PropTypes } from "prop-types";

const Sample = () => <div>Hello</div>;

export default Sample;

我也试过simple-import-sort了，不知道怎么配置。如何配置我的项目以便import语句自动保持有序？

标签： reactjseslint

解决方案

推荐阅读