prettier trailing commas error when importing a group

Question

I am having an issue where prettier seems to break itself when trying to follow it's trailing comma rules. Here is a sample of what I'm seeing:

My prettierrc.js file:

module.exports = {
  semi: true,
  trailingComma: "all",
  avoidEscape: true,
  printWidth: 120,
  tabWidth: 3
};

My issue code:

import {
   Button,
   ButtonGroup,
   CardContent,
   CircularProgress,
   Divider,
   TextField,
   useMediaQuery
} from "@material-ui/core";

What is happening is that prettier advises to add a trailing comma after useMediaQuery. I add it and then when a save the file, prettier removes the trailing comma causing an error.

Screenshots:

---

                BEFORE I SAVE             &             AFTER I SAVE

[

If a import them individually, it works. It's only when I import 6+ on one line.

Answer 1

I had the same issue and I found the guilty, it's the source.organizeImports setting.

If you put the setting to "false", the issue disappears.

If, like me, you want to keep this setting enabled, you can use it like that (array instead of object):

"editor.codeActionsOnSave": [
  "source.organizeImports",
  "source.fixAll.eslint"
],

When you use an array, order is respected, so organizeImports remove the comma, but fixAll.eslint re-add it