0

I have a Next.js project that is configured to use Prettier & ESLint. I want to enable the Prettier rule "trailingComma" by setting its value to "all", such that the .prettierrc file contains the following:

    // ".prettierrc"

    {
        "trailingComma": "all"
    }

I am using an .eslintrc.json file to configure ESLint, and I have it configured to apply a couple of plug-ins, and to extend a couple of the plug-in's rule-sets.

This is an image of my file:

enter image description here

  {
    "next",
    "next/core-web-vitals",
    "prettier",
    "eslint:recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "plugin:typescript-eslint/recommended",
  }

The following ESLint rule is the rule ESLint uses to configure commas:

"comma-dangle": "off",

This rule is shown to affect the trailingComma rule, as it is mentioned in the error message:

"prettier/prettier": ["error", {}, { "usePrettierrc": true }],


Prettier seems to execute when I save, and the commas are added to the end of the list, but then I get the following error message (shown in the image).

enter image description here

I tried adding the "endOfLine" option both to .prettierrc and .eslintrc.json rule "prettier/prettier", someone said that it would fix the issue, but it didn't fix it.

How can I keep the trailing commas from displaying errors in the editor?

JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
Yurii Kovalchuk
  • 61
  • 7
  • So I have already answered a couple of question like this. You should find them helpful. If they do not solve your problem, please comment in the answers comment box what issue your having that the answer doesn't seem to help with and I will be happy to assist you further. If the answer does help, please let us know that the answer solved your problem. Here are the links. **#1 [Configuring trailingComma in ESLint/Prettier environment](https://stackoverflow.com/questions/68519065/why-does-prettier-put-the-trailing-comma-on-its-own-and-give-an-error-saying-tha/68521897#68521897)** – JΛYDΞV Jun 30 '22 at 15:06
  • and **#2 [Configuring ESLint Prettier React with the prettier-prettier rule such that it adheres to the Airbnb style guide](https://stackoverflow.com/questions/56280222/airbnb-eslint-prettier-conflict-over-switch-and-case-indentation/64166241#64166241)** – JΛYDΞV Jun 30 '22 at 15:07
  • Link #1 covers the exact question your asking about, but link #2 is also very helpful for any rule in a Prettier/ESLint environment. – JΛYDΞV Jun 30 '22 at 15:09

0 Answers0