ESLint import/order规则未按字符集排序，导入语句顺序异常

问题重现 #

包升级后，import/order规则的alphabetize属性排序逻辑出现变化，原本的导入顺序被反转：

原导入语句：

import { data } from "../../shared/myfile.tokens";
import { data } from "./../../shared/myfile.service";

ESLint修改后结果：

import { data } from "./../../shared/myfile.service";
import { data } from "../../shared/myfile.tokens";

你的配置 #

"import/order": ["error", {
    "groups": ["builtin", "external", "internal"],
    "alphabetize": {
        "order": "asc",
        "caseInsensitive": true
    },
}],

原因分析 #

问题出在包升级后，eslint-plugin-import的import/order规则调整了排序时的路径处理逻辑：

• 旧版本规则：直接对导入语句中的原始字符串进行字符顺序比较。原始字符串中"../../shared/myfile.tokens"的第二个字符是.（ASCII码46），而"./../../shared/myfile.service"的第二个字符是/（ASCII码47），由于46 < 47，所以前者会排在前面。
• 新版本规则：先对导入路径做标准化处理（使用类似Node.js path.normalize的逻辑），./../../会被简化为../..，此时两个路径的前缀部分一致，排序逻辑转为比较文件名：myfile.service中的s（ASCII码115）小于myfile.tokens中的t（ASCII码116），所以升序排列时service文件的导入会被放在前面。

解决方案 #

如果需要恢复基于原始字符串的排序逻辑，可以尝试以下方法：

1. 检查eslint-plugin-import版本变更日志，确认是否新增了控制路径标准化的配置项（例如normalizePaths之类的开关），若有则关闭该配置。
2. 若新版本无相关开关，可以通过自定义路径分组（pathGroups）将带./前缀的路径归为单独分组，并调整分组顺序，确保不带./的路径分组排在前面：

"import/order": ["error", {
    "groups": ["builtin", "external", "internal"],
    "pathGroups": [
        {
            "pattern": "./*",
            "group": "internal",
            "position": "after"
        }
    ],
    "alphabetize": {
        "order": "asc",
        "caseInsensitive": true
    },
}],

这样所有以./开头的导入会被放在同组内的非./路径之后，符合你之前的预期顺序。

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