导入组时出现更漂亮的尾随逗号错误答案

【问题标题】：prettier trailing commas error when importing a group导入组时出现更漂亮的尾随逗号错误
【发布时间】：2021-06-30 14:49:33
【问题描述】：

我遇到了一个问题，即 prettier 在尝试遵循其尾随逗号规则时似乎会自行中断。这是我所看到的示例：

我的 prettierrc.js 文件：

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

我的问题代码：

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

发生的情况是，prettier 建议在 useMediaQuery 之后添加一个尾随逗号。我添加它，然后在保存文件时，prettier 会删除导致错误的尾随逗号。

截图：

[

如果单独导入它们，它可以工作。只有当我在一行上导入 6+ 时。

【问题讨论】：

对不起，我忘了补充，这发生在任何导入组上，而不仅仅是我的 Material-UI 导入。
看起来你的 prettier 文件对 prettier 没有任何影响。尝试切换到 .prettierrc 文件类型并使用您在此处看到的 JSON 格式 prettier.io/docs/en/configuration.html
@JayDev，我通过将其重命名为 .prettierrc 进行了测试，使其成为 json 格式，它与 js 文件具有相同的问题。
面临同样的问题。你找到解决办法了吗？
@YogenDarji，你好。我现在在 Mac 上，似乎没有问题。在 Windows 上，我已经确认它仍然存在问题。

【解决方案1】：

我遇到了同样的问题，但经过艰苦搜索后，我修复了在您的 .prettierrc 文件中添加 trailingComma 属性

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

如果您仍然遇到任何问题，只需重新启动 VS Code。

【讨论】：

【解决方案2】：

我遇到了同样的问题，但我发现有罪，这是 source.organizeImports 设置。

如果您将设置设为“false”，问题就会消失。

如果像我一样，你想保持启用这个设置，你可以这样使用它（数组而不是对象）：

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

当你使用数组时，顺序是被尊重的，所以organizeImports去掉逗号，但是fixAll.eslint重新添加它

【讨论】：