Search code examples
javascripttypescriptvisual-studio-codeangular-cliprettier

Why is Prettier not including trailing commas?


I've created a completely new angular application using ng new test-app, added Prettier to devDependencies and installed it and have disabled all extensions except Prettier in VSCode.

The problem is that when I set up VSCode to format on save, it always removes the trailing commas in typescript arrays and objects.

I've set "trailingComma":"all" in .prettierrc.json as well as having these settings in 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"
}

My User settings for all vscode projects is

{
  "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",
    "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
}


Solution

  • Turns out Prettier does add trailing comma's but only if the array is split over multiple lines.

    E.g. the code below will have a trailing comma added by prettier

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