使用 Prettier 对 Import 进行排序

在日常开发中，为了使项目中的代码整洁有序，我们除了格式化代码，也需要对 import 进行一个格式化。

这里我们用到的包是 @trivago/prettier-plugin-sort-imports，它是一个 Prettier 插件，可以帮助我们自动排序 import 语句。

安装插件#

我们先在项目中安装下面的依赖：

1
pnpm add -D prettier @trivago/prettier-plugin-sort-imports

配置规则#

然后在项目根目录下创建 .prettierrc 这样一个文件，之后就可以对规则进行配置：

1
{
2
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
3
  "tabWidth": 2,
4
  "trailingComma": "all",
5
  "singleQuote": false,
6
  "jsxSingleQuote": false,
7
  "semi": true,
8
  "endOfLine": "lf",
9
  "importOrderSeparation": true,
10
  "importOrderSortSpecifiers": true,
11
  "importOrder": [
12
    "^react",
13
    "^next",
14
    "<THIRD_PARTY_MODULES>",
15
    "@/app/(.*)",
16
    "@/components/(.*)",
17
    "@/lib/(.*)",
18
    "@/.*",
19
    "^./(.*)",
20
    "^../(.*)",
21

22
    ".(css|less|scss|sass|stylus)$"
23
  ]
24
}

这里主要介绍下面几个配置项：

importOrder：这是一个正则表达式数组，用于定义你 import 语句的排序规则和分组顺序，这里的规则是：

以 react 开头的导入语句排在最前面。
接着是以 next 开头的导入语句。
然后是所有第三方模块（<THIRD_PARTY_MODULES> 是一个特殊的占位符，表示所有未被其他规则匹配的第三方模块）。
接下来是以 @/app/、@/components/、@/lib/ 和 @/ 开头的导入语句，分别对应项目中的不同目录。
再之后是相对路径的导入语句，先是当前目录（./）的导入，然后是上级目录（../）的导入。
最后是样式文件的导入（如 .css、.less、.scss、.sass、.stylus）。

importOrderSeparation：会在你定义的每个导入分组之间添加一个空行。

当值为 true 时：

1
import { useState } from "react"
2
import axios from "axios"
3
import dayjs from "dayjs"
4
import Link from "next/link"
5

6
import Header from "@/components/Header"

当值为 false 时：

1
import { useState } from "react"
2
import axios from "axios"
3
import dayjs from "dayjs"
4
import Link from "next/link"
5

6
import Header from "@/components/Header"

importOrderSortSpecifiers：会按字母顺序对单个导入语句中的命名导入进行排序。

当值为 true 时：

1
import { useEffect, useRef, useState, useTransition } from "react"

当值为 false 时：

1
import { useEffect, useRef, useState, useTransition } from "react"

使用注意#

当项目中使用了 prettier-plugin-tailwindcss 的话，需要把这个插件放在最下面，否则这个类名排序插件和其他的 Prettier 插件可能会有一个兼容性问题。

1
{
2
  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"]
3
}