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

Question

.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"}] 但它没有用

Answer 1

更改您的 .prettierrc 文件，使其看起来像这样:

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

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

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

    }

或者你可以关闭规则

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

如果您使用 VSCode，您还有另一个选择是使用 ESLint-Prettier 扩展，而不是使用 ESLint 插件作为依赖项。 VSCode 扩展在这种情况下不会发生冲突。
这里发生冲突的原因是因为它是一个格式化规则，而 ESLint 的格式化规则会干扰像 prettier 这样的 JavaScript 格式化程序。