prettier-plugin-sort-imports does not respect import order

Question

I'm using @trivago/prettier-plugin-sort-imports 4.0.0 and prettier 2.6.2 and it seems to simply ignore What I wrote there. Or I can't figure out how to correctly specify what I want. This is what my .prettierrc.json looks like:

{
  "printWidth": 110,
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always",
  "endOfLine": "auto",
  "importOrder": ["^react$", "^./_app.scss$", "^@lc/(.*)$", "^components/(.*)$", "^[./] "],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

I want react to appear at the top, then third party modules, any .scss or .css files should appear after that, and then basically Anything else. But I'm not there yet. So far it can't even put react on top and I don't know why.

I'd appreciate any help!

Answer 1

Things like this will get you far.

{
    "importOrder": ["^react", "^.(css|scss)$", "", "^components/(.*)$", "^[./]"],
    "importOrderSeparation": true,
    "importOrderSortSpecifiers": true
}