各位前端的朋友们，你们有没有过这种经历 ------ 打开一个组件文件，顶部的 import 语句乱得像被猫踩过的键盘，React 在中间，第三方库在最下面，自己写的组件反而插在最前面？每次想找个导入都得上下扫三遍，眼睛都快瞎了。
别急，今天咱们就来聊聊怎么把这些 import 收拾得服服帖帖，而且 ------全自动，再也不用手动挪来挪去了。
为什么要折腾 import 排序？
你可能会说："能跑不就行了，排那么整齐干嘛？"
哎，这话就外行了。把 import 排好序，好处可太多了：
- 一眼看清来源：哪些是第三方库，哪些是自己写的文件，分分钟分辨
- 减少合并冲突：大家都按同一套规则来，git merge 时少掉一堆头发
- 强迫症福音：整整齐齐的，看着就心情舒畅，写代码都更有动力了
但是！手动排序是不可能手动的，这辈子都不可能手动的。而且如果你像我一样，疯狂依赖 VS Code 自带的 sort-imports，那恭喜你 ------ 当你把代码分享给同事时，你们的格式大概率会打起来，谁看谁的都不顺眼。
这时候，就该请出我们的老朋友了：ESLint。
ESLint 出马，一个顶俩
众所周知，ESLint 是 JavaScript 界最流行的代码检查工具，基本上每个 React 项目里都有它的身影。它能帮你定义一套统一的代码风格，让所有人写出来的代码都像一个人写的 ------ 当然，是好看的那个人。
ESLint 本身其实自带了 import 排序的规则，但说实话，功能有点鸡肋，满足不了我们的需求。所以我们要请出一位强力外援：eslint-plugin-import。
这个插件可不简单，它不仅能帮你整理和排序 import，还能顺手帮你检查文件路径有没有拼错、包名有没有写错 ------ 相当于给你的 import 请了个私人秘书。
我的私藏配置，拿走不谢
首先，把 eslint-plugin-import 装到你的开发依赖里，然后在 ESLint 配置文件的插件数组中加上它。这些基础操作我就不啰嗦了，直接上核心配置：
json
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
]别被这一坨 JSON 吓到，我来给你逐个拆解，保证一听就懂：
1. groups ------ 分组顺序
这一项定义了 import 的大分组顺序：
builtin：Node.js 内置模块（比如fs、path）external：第三方包（比如react、lodash）internal：项目内部的文件（比如你自己写的组件、工具函数）
简单说就是：先公家的，再别人家的，最后自己家的，规矩得很。
2. pathGroups ------ 特殊照顾 React
这一项是我的 "私心"------ 我希望 react 永远排在所有第三方包的最前面，毕竟它是咱们的老大嘛，得有排面。
所以这里用 pattern: "react" 专门匹配 React 的导入，然后把它放到 external 分组的 before（最前面）位置。
3. pathGroupsExcludedImportTypes ------ 给 React 开小灶
这一项是配合上面用的，把 React 从普通的 external 类型里 "拎出来"，这样它才能和其他第三方包分开独立成组，享受 C 位待遇。
4. newlines-between: always ------ 分组之间空一行
这个就好理解了，不同分组之间必须空一行隔开，不然全挤在一起，看着还是乱糟糟的。留白是一种艺术，懂的都懂。
5. alphabetize ------ 组内按字母排序
最后，每个分组内部按字母升序排列，而且忽略大小写。这样找东西的时候，按字母表顺序扫就行了，效率翻倍。
效果展示：整整齐齐，赏心悦目
配置好之后，跑一下 ESLint 自动修复，你的 import 就会变成这样：
javascript
import React from 'react';
import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';
import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';看看，看看！React 独占一行 C 位出道，第三方包按字母排好队，本地文件安安静静待在最后，中间还有空行分隔 ------这才叫代码的艺术，舒服了舒服了。
写在最后
好了，以上就是今天的分享。希望这份配置能帮你把项目里的 import 都收拾得干干净净，从此告别乱糟糟的导入语句，写代码都更有好心情了。
如果有什么问题或者更好的建议，欢迎在评论区交流 ------ 毕竟，代码可以乱，交流不能停嘛。
感谢阅读，咱们下篇文章见！👋