prettier trailing commas error when importing a group

user_15707923 0
Viewed 643

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:

Error

                BEFORE I SAVE             &             AFTER I SAVE

[Before I Save3 After I Save

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

prettier-eslint prettier visual-studio-code
2 Answers

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

user_96438350

I was facing the same problem, but after a hard search I fixed just adding trailingComma property in your .prettierrc file

    {
        ...,
        "trailingComma": "all",
    }

If you still facing any issue just restart the VS Code.

user_38404210
Related