Better

踩一深坑，罢了罢了，真奔溃了，只愿日后待我以温柔。近期使用 eslint-plugin-import 来限制 import order，结果在我本地运行良好，其他同事却死活不行，神奇的是，竟然我自己的笔记本电脑，也是正常工作的，amazing，怎么会这么巧合。

现象

使用 eslint-plugin-import 的 import/order 规则，一开始规则如下

'import/order': [
    'error',
    {
    groups: ['builtin', 'internal', 'external', ['parent', 'sibling', 'index']],
    'newlines-between': 'always',
    },
],

项目背景，使用 webpack 的 alias 配置通过 @ 符号来实现绝对导入。

后续：一开始使用上述规则时，对于 internal 和 external 的顺序本就存在疑惑，但由于其表现正常，且通过 lint:fix 能正确修复。加上查了很久的资料，也并没有找到合理的解释，有点累了也就没深究了。

然而该来的还是会来，是躲不过的，第二天发现同事们都表现异常。又开始埋头找原因

艰难历程

对于这么奇怪的表现，我表示很费解，看我都尝试了些啥

• 本想拷贝一个同事 A 的代码（同 Window10 平台），但不知道为啥 A 拷出来的工程不可用（也就没有尝试了）
• 把我的代码拷贝给同事 B，注意 B 用的是 Ubuntu（一开始没想到会和平台有关），配置出现了问题
• 难道是我的 vscode 版本问题？于是和他们一样升级到了最新版，配置正常工作。难道是开启了什么高级设置？于是乎完全卸载重装 vscode，配置依旧正常工作。（反省：其实不应该怀疑这个，因为使用脚本进行检查跑的是 node_modules 下的文件，和 vscode 是没有关系，自己也是病急乱投医了）
• 回到家里用 Mac 拉取代码，发现配置正常工作，删除 node_modules 重装也正常工作，这就太巧合了，又好笑又好气
• 在 issue 上看到 ts 版本 >= 3.8 会存在问题。而且同事正好使用的也是 3.7.3，麻烦同事升级到 3.8.3，配置依旧出现问题
• 最后对比下 eslint-plugin-import 的版本，他的是 2.20.2，而我的是 2.20.1，难道是这个的问题吗？我尝试升级到 2.20.2 后，我的本地终于出现问题了。但这里就抛出一个问题了，为什么针对同一份 package.json，在几乎同一个时候，我们安装的某些包版本竟然不一致，比如这里的 eslint-plugin-import 和 typescript
• 不服气啊，为什么会安装的东西不一样呢，是因为 node 版本不一样么。询问后他是 14.2.0，我是 10.16.0，确实不一样，于是我切换到 14.2.0 后，重新安装 node_modules 后，配置确实出现问题了

事情到这里，为什么一开始只有我可以这个正常工作的现象好像得到了解释

• Ubuntu 不存在这个问题，这个现象和平台相关
• 为什么同 Windows10 的同事也不可以，因为它的 node 版本较新，导致安装的 eslint-plugin-import 比我高一个 patch 版本，这个问题在这个版本得到了修复

然后我不甘心，又多尝试了两步

• node 切换成 14.2.0，重新安装 node_modules，但 eslint-plugin-import 其实还是 2.20.1 版本，但是配置确实出现问题了，我的乖乖
• 我又将 node 切成了 10.16.0，重新安装 node_modules，eslint-plugin-import 依旧还是 2.20.1 版本，但配置还是依旧出现问题了

谁能告诉我，兜兜转转回到原地，表现却不一样了，是因为啥原因？

eslint-plugin-import 怪项

对于一开始的配置，在开头也说过，对于 internal 和 external 的顺序存在疑惑。但却神奇的在自己电脑上正常工作了。

这里得出一个大概的结论：就是 bug 被我当 feature 使用了，然而这个 bug 在将来的某个版本被修复了

正确的配置应该是下面这个样子

'import/order': [
    'error',
    {
    groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
    pathGroups: [
        // 将 React 全家桶提取到最前
        {
            pattern: 'react*',
            group: 'external',
            position: 'before',
        },
        // 将 @ 导入的方式归为 internal，注意这里必须是两个**，才可以表示多级目录
        {
            pattern: '@/**',
            group: 'internal',
        },
    ],
    // 默认值是 ['builtin', 'external']，在 Web 项目中，设置了 pathGroups 后，这里通常需要将 external included，这样才能和 internal 划分开来
    pathGroupsExcludedImportTypes: ['builtin'],
    // 不同分组之间必须有一个空行
    'newlines-between': 'always',
    },
],

吸取的教训

这这里列举走的弯路

• 有时候可以从测试用例用获取找准确信息：这是由于我一开始把 bug 当 feature 使用，导致我开始怀疑 internal 和 external 的具体区分了。开源项目通常都很注重单测，这时候可以通过查找对应测试用例，来找到准备的信息
• 关于 ChangeLog：如果怀疑到版本问题时，通常会去查看版本具体做了哪些改动。通常我会去 github 的 release 页面，但我 eslint-plugin-import 并没有维护具体更改内容，此时内心一阵 MMP。但其实是我冤枉他了，其项目源文件根目录中的 CHANGELOG.md 有维护具体改动

额外扩展 Jest

vscode-jest 这个扩展突然也不能正常工作了，也找了好久的原因

原因：由于之前将默认 test 脚本给测试组使用，自己使用 test:watch 脚本的改动造成，因为 vscode-jest 时默认调用 test 命令来工作的。

解决办法：网上说通过设置 vscode setting 的 jest.pathToJest 来实现自定义，但亲测无用。暂时没找到解决办法。

资料

• Enforce a convention in module import order
• Support monorepos