为啥 Prettier 不包括尾随逗号?

Posted

技术标签:

【中文标题】为啥 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


【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

以上是关于为啥 Prettier 不包括尾随逗号?的主要内容,如果未能解决你的问题,请参考以下文章

为啥在变量名后添加尾随逗号使其成为元组?

强制 Prettier 将内部文本放在新行上,不带尾随 >

Atom 与 prettier、eslint 和 airbnb 风格的 React 开发指南

tslint - 最后一行缺少尾随逗号(尾随逗号)

React 创建项目流程+配置 eslint prettier 和 commitlint 规范工程

React 创建项目流程+配置 eslint prettier 和 commitlint 规范工程