为什么 prettier 将尾随逗号放在自己的位置并给出错误说它需要删除？答案

【问题标题】：Why does prettier put the trailing comma on its own and give an error saying that it needs to be removed?为什么 prettier 将尾随逗号放在自己的位置并给出错误说它需要删除？
【发布时间】：2021-10-01 18:07:19
【问题描述】：

.eslintrc.json

{
  "env": {
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": ["prettier", "airbnb-base"],
  "plugins": ["prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

.prettierrc.json

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5"
}

格式化代码时，prettier 添加了一个尾随逗号，但它也给我一个错误，说它应该被删除。即使我们删除了尾随的逗号，eslint 也会告诉我相反的情况，应该添加它。请告诉我问题的解决方法

我还尝试更改 eslint 规则 "prettier / prettier": ["error", {"endOfLine": "auto"}] 但它没有用

【问题讨论】：

"trailingComma": "es5" 表示最后一个属性后面的逗号无效。 "airbnb-base" 可能包含与此冲突的规则？

标签： javascript eslint prettier

【解决方案1】：

更改您的 .prettierrc 文件，使其如下所示：

    // "./.prettierrc"
    {
        "printWidth": 80,
        "singleQuote": true,
        "trailingComma": "all",
    }

将如下配置添加到 .eslintrc.json 文件内的 ESLint 规则 属性中。

    // "./.eslintrc.json"
    {
        "comma-dangle": ["error", "always"],

    }

或者你可以关闭规则

    // "./.eslintrc.json"
    {
        "comma-dangle": 0
    }

如果您使用 VSCode，您还有另一个选择是使用 ESLint-Prettier 扩展，而不是使用 ESLint 插件作为依赖项。 VSCode 扩展在这种情况下不会发生冲突。

这里发生冲突的原因是因为它是一个格式化规则，而 ESLint 的格式化规则会干扰像 prettier 这样的 JavaScript 格式化器。

【讨论】：