eslint-plugin-prettier: error Delete `··` prettier/prettier

@mutaimwiti or, you can add this line to your .prettierrc

"endOfLine": "auto"

put this in eslint file, worked for me:

"prettier/prettier": ["error", { "endOfLine": "off" }]

None of this helped me actually

Changing from CRLF to LF helps

Prettier belives you’ve got too many spaces on lines 16 and 17. As such we seem to be reporting the error from prettier correctly.

If running eslint with the --fix flag does not cause this to be fixed then I expect you have some other eslint rule conflicting with prettier’s fix that is putting the spacing back.

I note that you are not extending the eslint-config-prettier configuration. You should configure that there are no eslint rules that conflict with prettier’s formatting.

For me it was indentation problem. You can run npx eslint folder/file.js --fix.

make sure add rules: {‘prettier/prettier’: [‘error’, {endOfLine: ‘auto’}]}, line in .eslintrc.js and also enable prettier plugin in vs code.

None of this is helpful

Check and make sure you don’t have the indent eslint rule.

Like: "indent": [ "error", 2 ]

Run

yarn run lint --fix

This fixed the issues for me

this worked for me

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //  add this line for you file type, prettier save, not eslint save
  "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.addMissingImports": true
  },
  "eslint.enable": true,
  "eslint.format.enable": true
}

There is a setting in Visual Studio Code “Javascript > Format: Enable” that can potentially conflict with the Prettier formatting. After disabling this setting, Prettier was able to take full control and fixed this problem for me.

here is my solution. Pay attention on line with rules for prettier. Just add {“endOfLine”: “auto”} for prettier rules.

.eslintrc:

{
  "extends": [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "react-app",
    "react-app/jest",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "prettier"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "prettier/prettier": ["warn",  {"endOfLine": "auto"}],
    "testing-library/prefer-screen-queries": "error",
    "testing-library/no-manual-cleanup": "error",
    "testing-library/prefer-wait-for": "error",
    "testing-library/no-await-sync-events": "error",
  }
}

.prettierrc:

{
    "tabWidth": 2,
    "quoteProps": "as-needed",
    "singleQuote": true,
    "printWidth": 120,
    "semi": true,
    "useTabs": false,
    "trailingComma": "all",
    "arrowParens": "avoid",
    "endOfLine": "auto"
}

dependencies:

disable your default formatter, only use eslint as code formatter

“prettier/prettier”: [ “warn”, { “singleQuote”: true, “endOfLine”: “auto”, “tabWidth”: 4 } ],

Not sure this will help anyone else, but errors didn’t go away for me until I restarted vscode.

Here I’m using npm and so I run the equivalent command:

npm run lint --fix

Solved here !

Changing from CRLF to LF helps

it works for me, thx

Restarting vscode helped. It has some issue with detecting changes in prettier config

@v-radev 's solution:

For me it was indentation problem. You can run npx eslint folder/file.js --fix.

worked for me.

In my file, I had many lines like:

       await fetchJson('/api/admin/sites', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(body),
       });
       await fetchJson('/api/admin/sites', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(body),
       });

I inserted one linear line like:

     await sendVerificationEmail({ email: a, token: b })

Which broke the eslint rule. After running the solution, I see that it got restructured like the rest:

       await sendVerificationEmail({
         email: a,
         token: b,
       });

Here I’m using npm and so I run the equivalent command:

npm run lint --fix

Solved here !

for those confused still, you may want to check this vid for context. https://www.youtube.com/watch?v=St1YSNoB36Y&t=121s

I was able to eventually solve my issue. I added a script under “scripts” in the package.json===> “lintfix”: “eslint ./src --fix --ext .js” <===then a ran ===> npm run lintfix

As @Dozorengel described, problem is probably related with your line ending file format. Try to setup .editorconfg file https://editorconfig.org/ or try to change line ending in your editor.

Not sure this will help anyone else, but errors didn’t go away for me until I restarted vscode.

@tomleo It did! I changed my tabWidth property in my .prettierrc file and I believe the VS Code Prettier extension did not immediately pickup the change. I saved a file and saw the tab width change to the new setting and then straight back to the original one while having eslint yelling at me that my indentation was incorrect. Reloading VS Code seems to have forced the Prettier extension to pick up the new config and now when I save a file my code indentation matches the newly set config without issues. Therefore thanks for your comment, it helped out! 😅

I am using VSCode, and adding the following additional setting option worked for me.

"eslint.format.enable": true,

I need to run prettier and auto fix everything afterwards though.

This works:

"prettier/prettier": [
      "off",
      {
        "endOfLine": "auto"
      }
    ]

But i’m pretty sure it’s just a workaround and not the actual fix.

make sure add rules: {‘prettier/prettier’: [‘error’, {endOfLine: ‘auto’}]}, line in .eslintrc.js and also enable prettier plugin in vs code.

it helps me!!!

Not sure who may find this useful, but I realised this happened because I was declaring an anonymous function which somehow affected formatting of prettier. Rewriting the function declaration to be a named function helped. Also it’s a benefit because tracing named functions give you the name, while anonymous functions may be harder to trace.

“prettier/prettier”: [“error”, { “endOfLine”: “off” }]

solve for me

This is not a good practice IMO.