Why does prettier put the trailing comma on its own and give an error saying that it needs to be removed?

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

When formatting the code, prettier adds a trailing comma, but it also gives me an error saying that it should be removed. Even if we remove the trailing comma, eslint tells me the opposite, that it should be added. Please tell me the solution to the problem

I also tried changing the eslint rule "prettier / prettier": ["error", {"endOfLine": "auto"}] and it didn't work

Answer 1

Change your .prettierrc file so that it looks like this:

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

Add the following setting, configured as it is below, to your ESLint Rules property that's inside of your .eslintrc.json file.

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

    }

or you can just turn the rule off

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

Another option you have, if your using VSCode, is to use the ESLint-Prettier extension, rather than than using the ESLint Plugins as dependencies. The VSCode extension will not have a conflict in this situation.

The reason there is a conflict here is because it is a formatting rule, and ESLint's formatting rules interfere with JavaScript formatters like prettier.