为什么 Prettier 不包括尾随逗号？答案

【问题标题】：Why is Prettier not including trailing commas?为什么 Prettier 不包括尾随逗号？
【发布时间】：2021-11-20 14:29:49
【问题描述】：

我使用ng new test-app 创建了一个全新的 Angular 应用程序，将 Prettier 添加到 devDependencies 并安装它，并在 VSCode 中禁用了除 Prettier 之外的所有扩展。这是它的链接https://github.com/Alex1291/test-app。

问题在于，当我将 VSCode 设置为保存时格式化时，它总是会删除 typescript 数组和对象中的尾随逗号。

我已经在 .prettierrc.json 中设置了 "trailingComma":"all"，并在 settings.json 中设置了这些设置

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "prettier.trailingComma": "all",
  "prettier.proseWrap": "always",
  "prettier.useEditorConfig": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

我对所有 vscode 项目的用户设置是

{
  "git.autoStash": true,
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "XXX",
    "[ ]",
    "[x]"
  ],
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
  "git.autofetch": true,
  "files.autoSave": "afterDelay",
  "git.enableSmartCommit": true,
  "workbench.startupEditor": "newUntitledFile",
  "cSpell.userWords": [
    "Reorderable",
    "bailliegifford",
    "configcat",
    "datatable",
    "devkit",
    "initialise",
    "initialising",
    "primeng"
  ],
  "editor.largeFileOptimizations": false,
  "git.confirmSync": false,
  "diffEditor.wordWrap": "on",
  "explorer.confirmDelete": true,
  "explorer.confirmDragAndDrop": true,
  "workbench.editorAssociations": {
    "*.sqlite": "default"
  },
  "diffEditor.ignoreTrimWhitespace": false
}

【问题讨论】：

标签： javascript typescript visual-studio-code angular-cli prettier

【解决方案1】：

事实证明，Prettier 确实添加了尾随逗号，但前提是数组拆分为多行。

例如下面的代码将有一个由prettier添加的尾随逗号

let x = [
  "aaaaaaaaaaaaaaaa",
  "bbbbbbbbbbbbbbbb",
  "cccccccccccccccc",
  "dddddddddddddddd",
  "eeeeeeeeeeeeeeee",
  "ffffffffffffffff"
];

【讨论】：