如何配置prettier-plugin-sort-imports的importOrder实现指定导入顺序？

你可以在prettierrc.js中使用如下配置，完全匹配你的导入顺序需求：

module.exports = {
  // 其他Prettier配置...
  plugins: ['@trivago/prettier-plugin-sort-imports'],
  importOrder: [
    '^react$',
    '^react-native$',
    '^@aaa-scp/',
    '^@',
    '^../../',
    '^../',
    '^./',
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
};

配置项说明： #

• ^react$：精确匹配react包，放在最优先级
• ^react-native$：精确匹配react-native包，紧跟react之后
• ^@aaa-scp/：匹配所有@aaa-scp开头的包，作为第三方包的专属子组
• ^@：匹配其余所有以@开头的第三方包（比如@react-navigation/drawer）
• ^../../：匹配从两级上级目录导入的本地文件
• ^../：匹配从单级上级目录导入的本地文件
• ^./：匹配同级目录的文件
• importOrderSeparation: true：开启组与组之间的空行分隔，让导入结构更清晰
• importOrderSortSpecifiers: true：对单个导入语句中的多个变量（比如{ a, b }）按字母排序

应用配置后的效果： #

对应你的示例，导入会被整理为：

import React from "react";
import { useWindowDimensions } from "react-native";

import a from "@aaa-scp/demo"
import { b } from "@aaa-scp/demo2"

import { createDrawerNavigator, DrawerNavigationProp } from "@react-navigation/drawer";

import Theme from "../../themes/styles";
import { AptosColors } from "../../themes/interfaces";

import HeaderButton from "../header/HeaderButton";
import LandingScreen from "../landing/LandingScreen";
import SideMenuContent from "../sideMenu/SideMenu";
import Header from "../header/Header";

import { DrawNavigatorParams, INITIAL_ROUTE } from "./DrawNavigatorParams";

若不需要组间空行，可将importOrderSeparation设为false，即可得到你期望的无空行连续结构。

内容的提问来源于stack exchange，提问作者The Coder