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

Question

我遇到一个问题，当试图遵循它的尾随逗号规则时， prettier 似乎会破坏自身。这是我所看到的示例：

\n

我的 prettierrc.js 文件：

\n

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

\n

我的问题代码：

\n

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

\n

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

\n

截图：

\n

\n

---

\n

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 在保存 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\ 之前保存后 xa0 \xc2\xa0 \xc2\xa0 & \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0

\n

[\n

\n

如果单独导入它们，它就可以工作。只有当我在一行导入 6+ 时才会出现这种情况。

\n

Answer 1

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

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

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

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

使用数组时，会遵守顺序，因此organizeImports请删除逗号，但fixAll.eslint重新添加它

Answer 2

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

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

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