为什么 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 Rules属性中，配置如下.eslintrc.json。

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

    }

或者你可以关闭规则

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

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

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