@trivago/prettier-plugin-sort-imports 无法将非相对路径的CSS/SCSS导入置于底部的问题求助

我最近在React项目里用@trivago/prettier-plugin-sort-imports自动排序导入语句，但遇到了个头疼的问题：那些不以./开头的.css/.scss导入（比如示例里的bootstrap/dist/css/bootstrap.min.css）总是没法乖乖待在导入列表的最底部，反而跑到前面去了。

举个例子，我现在的导入是这样的：

import { PublicClientApplication } from '@azure/msal-browser';
import 'bootstrap/dist/css/bootstrap.min.css'; // 这个本该在最底部
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';
import { msalConfig } from './auth-config.ts';

import './styles/index.css';

我的.prettierrc配置是这样的：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "importOrder": ["^@?\\w", "^@/", "^[./](?!.*\\.(css|scss)$)", ".*\\.(css|scss)$"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

我本来以为最后那个.*\\.(css|scss)$规则会把所有样式文件导入都放到最底部，但问题出在bootstrap的css导入同时匹配了第一个规则^@?\\w——插件是按配置里的规则顺序匹配的，先匹配到哪个规则就归到哪一组，所以它就跑到前面去了。（我之前已经给第三个规则加了排除样式文件的逻辑，就是因为同样的原因）

有没有办法解决这个问题？

解决方案：修改importOrder规则，给第三方包规则添加样式文件排除 #

核心思路是：让第一个匹配第三方包的规则排除掉所有.css/.scss结尾的导入，这样第三方样式文件就不会被提前匹配，最终会落到最后专门匹配样式文件的规则组里。

修改后的.prettierrc配置如下：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "importOrder": [
    "^@?\\w(?!.*\\.(css|scss)$)", // 匹配第三方包，但排除样式文件
    "^@/",
    "^[./](?!.*\\.(css|scss)$)", // 匹配相对路径的非样式文件
    ".*\\.(css|scss)$" // 所有样式文件统一放到最后
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

原理说明 #

• 我们给第一个规则^@?\\w添加了否定前瞻断言(?!.*\\.(css|scss)$)，意思是：匹配以字母/下划线开头（或@开头的组织包）的导入，但排除掉任何以.css或.scss结尾的路径。
• 这样像bootstrap/dist/css/bootstrap.min.css这类第三方样式导入就不会被第一个规则匹配，会继续往下找，最终被最后一个.*\\.(css|scss)$规则捕获，从而和本地样式文件一起排在导入列表的最底部。

修改后，你的导入会变成预期的顺序：

import { PublicClientApplication } from '@azure/msal-browser';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';
import { msalConfig } from './auth-config.ts';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

备注：内容来源于stack exchange，提问作者nop