9

Before you mash the duplicate button, I know there are more posts on the same issue and I've tried the solutions to no avail (Please see the last part of my post).

I'm using React 17.0.2, ESLint 8.5.0 and Prettier 2.5.1 and I'm getting the following error in almost every js file.

Delete `␍`eslintprettier/prettier

This is what it looks like

enter image description here

This is my .eslintrc.json:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off"
    }
}

I followed this guide to add ESLint and Prettier to my project

https://medium.com/how-to-react/config-eslint-and-prettier-in-visual-studio-code-for-react-js-development-97bb2236b31a

I've tried almost every suggestion from another post about the same issue to no avail...

Why do I keep getting Delete 'cr' [prettier/prettier]?

I've used

git config --global core.autocrlf false

Deleted my project and cloned it again a few times, but no change. I've also tried some of the other suggestions where they edit .eslintrc.json but it either doesn't work or breaks my autoformat.

I'm out of ideas and spent way too much time on this, can anyone tell where I'm going wrong?

SJ19
  • 1,933
  • 6
  • 35
  • 68
  • 2
    What line-ending setting do you have set in VSCode? (on the bottom bar there should be a button that toggles bwteeen 'CRLF' and 'LF'). – match Dec 24 '21 at 13:03
  • 1
    @match Thanks for the suggestion! It was on CRLF, changing it to LF fixes it for the current file. Is there a way to put LF as default so I don't have to change it every time I'm in a different file? – SJ19 Dec 24 '21 at 13:50
  • https://qvault.io/clean-code/line-breaks-vs-code-lf-vs-crlf/ – match Dec 24 '21 at 14:02
  • Added a proper answer - it was a valid question that I've seen people hit by before, and covers the 'other side' - i.e the editor, not the files or git. – match Dec 24 '21 at 16:46

2 Answers2

31

You could easily fix that issue.

In .eslintrc.json file, you should configure rules option.

Add the following configuration and it will fix the problem.

"prettier/prettier": ["error", { "endOfLine": "auto" }]
Alan Z
  • 803
  • 1
  • 7
  • 13
12

Many editors let you change between CRLF and LF line-ending modes. On VSCode this is a toggle on the bottom menu bar which switches when clicked.

The change the default for all files, edit settings.json and add the following at the top:

For default LF:

{
    "files.eol": "\n",
}

For default CRLF:

{
    "files.eol": "\r\n",
}
match
  • 10,388
  • 3
  • 23
  • 41
  • 1
    Thanks again for the help. I'm sure this answer will help someone else in the future as well. – SJ19 Dec 24 '21 at 21:47