704

I am using VS Code with Prettier 1.7.2 and ESLint 1.7.0. After every newline I get:

[eslint] Delete `CR` [prettier/prettier]

This is the .eslintrc.json:

{
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "env": {
    "jest": true,
    "browser": true
  },
  "rules": {
    "import/no-extraneous-dependencies": "off",
    "import/prefer-default-export": "off",
    "no-confusing-arrow": "off",
    "linebreak-style": "off",
    "arrow-parens": ["error", "as-needed"],
    "comma-dangle": [
      "error",
      {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "ignore"
      }
    ],
    "no-plusplus": "off"
  },
  "parser": "babel-eslint",
  "plugins": ["react"],
  "globals": {
    "browser": true,
    "$": true,
    "before": true,
    "document": true
  }
}

The .prettierrc file:

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
}

How can I get rid of this error?

2
  • 13
    Take a look at your .eslintrc.js file. removing 'plugin:prettier/recommended' from the extends array should fix the issue.
    – Sanu Soman
    Aug 8, 2021 at 5:30
  • 4
    You may try disabling ESLint VSCode extension
    – Amitesh
    May 6, 2022 at 7:21

42 Answers 42

1132

Try setting the "endOfLine":"auto" in your .prettierrc (or .prettierrc.json) file (inside the object)

Or set

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

inside the rules object of the eslintrc file.

If you are using Windows machine endOfLine can be "crlf" basing on your git config.

10
  • 135
    Changing the .eslintrc file worked for me, but not the .prettierrc file. No idea why or what the difference is (I'm new to all the tags on the OP).
    – Neo
    Jan 31, 2019 at 2:19
  • 11
    My guess is that you might need Prettier extension in the VS Code. The prettierrc will only be valid in that scenario.
    – Vah Run
    May 29, 2019 at 3:02
  • 15
    changing the end of line sequence from CRLF to LF worked for me, on a windows machine
    – Anup
    Jun 18, 2020 at 7:33
  • 112
    For a newbie like me, this is how it is to be done. Open .eslintrc.json present in your root directory (frontend). After changes it will look as under: { "extends": ["react-app", "prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": ["error", { "endOfLine": "auto" }] } }
    – SimpleGuy
    Aug 30, 2020 at 1:50
  • 21
    FYI: a restart is required for the changes to take effect on VSCode.
    – Sangimed
    Aug 18, 2021 at 16:40
713

Change this setting on VSCode.

An image showing the status bar at the bottom of the VSCode window. An arrow points to the 'LF' indicator; clicking on this option brings up a menu where you can select between LF and CLRF.

2
  • 40
    This would fix the problem, but only till you opened some other source file with CRLF. Above answer is more effective.
    – BobHy
    Jun 7, 2019 at 17:55
  • 5
    Besides changing CRLF to LF within VSCode, git might be doing auto conversion under the hood. If you chose checkout Windows-style when installing, it converts source code you clone to CRLF. So reinstalling git and choose checkout as-is, commit Unix-style will fix it.
    – Huy
    Apr 8, 2021 at 10:22
247

In my windows machine, I solved this by adding the below code snippet in rules object of .eslintrc.js file present in my current project's directory.

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

This worked on my Mac as well

0
80

Solution

git config --global core.autocrlf false

After global configuration, you need to pull the code again.

Root cause of the problem:

The culprit is git, a configuration property of core.autocrlf

For historical reasons, the line breaks of the text file on windows and linux are different.

  • Windows At the time of line break, carriage return is used at the same time CR(carriage-return character) and line breaks LF(linefeed character)
  • Mac and Linux only use the newline character LF
  • Old version of Mac uses carriage return CR

Therefore, there will be incompatibility problems when text files are created and used in different systems.

When I clone code on Windows, autocrlf is true as default and then each line of the file is automatically converted to CRLF. If you do not make any changes to the file, eslint delete CR by pre-commit since git automatically convert CRLF to LF.

Reference

https://developpaper.com/solution-to-delete-%E2%90%8Deslint-prettier-prettier-error/

1
  • 5
    This solution would break cross-platform development - you'd be able to push a mix or LF/CR/CRLF to the repo. I suggest not to use it unless you work alone, and only ever on one type of OS (Linux/Mac/Windows). A good config for a team is to use autocrlf=true and just configure the linting tools to respect the EOL characters of the platform they run on, as in the other answers ("endOfLine": "auto"). What is worse is that you suggest to set autocrlf=false GLOBALLY, I think if it ever needs to be done, it should always be per-repo, otherwise all your new repos have a problem from the get go. Jun 2, 2022 at 8:12
68

in the file .eslintrc.json in side roles add this code it will solve this issue

      "rules": {
    "prettier/prettier": ["error",{
      "endOfLine": "auto"}
    ]

  }
1
  • This is what I was looking for - ppl didn't mention that it must be inside "rules" otherwise it won't help at all
    – Rezor
    Dec 21, 2022 at 13:19
47

If the above code is not working for you try these two steps.

1. in the file .eslintrc.json inside rules object add this code it will solve this issue

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

2 Change dev server --fix

npm run dev

To

npm run dev --fix

OR

npm run lint -- --fix
yarn run lint -- --fix
0
39

As you can see add this into .eslintrc works!

enter image description here

"prettier/prettier": ["error", {
    "endOfLine": "auto" }
],
2
  • 17
    Would be an even better answer if you pasted searchable and copy/pasteable source code, rather than an image :-)
    – Christoph
    Sep 9, 2022 at 3:08
  • This is the code, it worked for me "prettier/prettier": [ "error", { "endOfLine": "auto" } ] Jan 23 at 9:28
32

Fixed - My .eslintrc.js looks like this:

module.exports = {
  root: true,
  extends: '@react-native-community',
  rules: {'prettier/prettier': ['error', {endOfLine: 'auto'}]},
};
1
  • Thanks fellow react-native user
    – Ash
    Nov 24, 2022 at 23:08
27

Try this. It works for me:

yarn run lint --fix

or

npm run lint -- --fix

0
21

I know this is old but I just encountered the issue in my team (some mac, some linux, some windows , all vscode).

solution was to set the line ending in vscode's settings:

.vscode/settings.json

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

https://qvault.io/2020/06/18/how-to-get-consistent-line-breaks-in-vs-code-lf-vs-crlf/

0
15

In the .eslintrc file add the following:

  • extends: ['prettier'] and plugins: ['prettier']

  • rules: {'prettier/prettier': ['error', {endOfLine: 'auto'}]}

In .prettierrc remove this:

  • endOfLine: 'auto'

It works for me.

13

Fixed: My eslintrc.js some rule look like this:

rules: {
    'prettier/prettier': ['error', { "endOfLine": "auto"}, { usePrettierrc: true }],  // Use our .prettierrc file as source
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'simple-import-sort/imports': 'error',
    "simple-import-sort/exports": "error"
}
12

Add this to your .prettierrc file and open the VSCODE

"endOfLine": "auto"
0
11

I am using git+vscode+windows+vue, and after read the eslint document: https://eslint.org/docs/rules/linebreak-style

Finally fix it by:

add *.js text eol=lf to .gitattributes

then run vue-cli-service lint --fix

11

npm run lint -- --fix

Run this command this worked for me

1
  • For me aswell thank you!
    – Mojgan
    Jun 20, 2022 at 7:49
10

Add these below rule in .eslintrc file and then restart your project.

rules: {
    'prettier/prettier': ['error', { "endOfLine": "auto"}, { usePrettierrc: true }],  
}
7

I was having the same problem in my nest js app . Adding the below code to .eslintrc.jsrules and then running yarn run lint --fix fixed the issue .

'prettier/prettier': [
  'error',
  {
    endOfLine: 'auto',
  },
],

and my .eslintrc.js rules looks something like this..

 rules: {
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'prettier/prettier': [
  'error',
  {
    endOfLine: 'auto',
  },
],

},

7

Solution

1. Disable auto conversion git setting

git --global config core.autocrlf false

2. Remove old cache data

git rm --cached -r .

3. Reset git files

git reset --hard

0
7

if you have already checked out the code

git config --global core.autocrlf input 


git rm --cached -r . 


git reset --hard
2
  • this would delete all your local git changes, be carefull to execute these commands. Mar 21, 2022 at 16:39
  • Worked for me on windows
    – Ian Samz
    Feb 15 at 10:52
6

In my case I am using windows OS and git code supports in Mac and getting converted to CRLF run below Command in cmd prompt to stop files getting converted to CRLF: enter image description here

git config --global core.autocrlf input

Checkout the code again and open Visual Studio Code again and run your scripts again. It worked for me.

1
  • why input? How else this suggestion is different from that by koko-js478?
    – YakovL
    May 8, 2022 at 17:13
6

I tried everything here and for me, I needed to manage prettier config extension through icon extensions > prettier > small engine > extensions settings > Prettier: End Of Line > set to auto.

After adding these two lines in my settings.json

"eslint.run": "onSave",
"editor.formatOnSave": true,

I was able to use the config below inside .eslintrc.js rule.

"prettier/prettier": ["error", {
    "endOfLine":"auto"
}],
6

Check the right-hand side of VS Code's status bar at the bottom where it shows information such as line and column, spaces, text encoding (UTF-8 etc). You should see a Select End Of Line Sequence status display (either LF or CRLF) that you can click on to change. Make sure you haven't manually changed this to something that conflicts with what you wish Prettier to use.

6

The best solution is to use .editorconfig. Especially if you are working with a team with different type OS. So disabling prettier in .eslintrc is not a good option at all.

Install .editorconfig from your vscode extension. Create a .editorconfig file in your project root directory and it to your .gitignore file so it won't bother your teammates.

Add this to your .editorconfig file or choose what workflow settings you need from the documentation.

[*]
end_of_line = lf

This will save your file automatically to EOL type lf instead of crlf in windows. Vise versa if using mac. Or depends on the project workflow setup.

The root cause is windows is default to crlf. So every time you try to create a file you will face this prettier Delete 'cr' error.

In Addition

If all the files you got from git contains Delete 'cr'.

  1. Delete your project
  2. Reinstall your git and choose checkout as-is, commit Unix-style line endings
  3. Clone your project from repo again
  4. Use the .editorconfig set up above
2
4

Error appears when I pull code from git, and this work for me:

STEP 1:

git config --global core.autocrlf false

STEP 2:

  • delete your current folder

STEP 3:

  • pull code from git again
  • try running command again
2
  • git config --global core.autocrlf false this command works very well, solving the LF issue on vs code
    – Frank Guo
    Jan 24, 2022 at 4:57
  • If you're working on different projects with different configurations you can set the flag locally for that repo by omitting the --global flag. Also, you don't need to delete the entire repo and clone it again, just resetting the branch to origin should work.
    – aitorllj93
    Feb 3, 2022 at 10:18
4

If you need to use with .prettierrc.js:

module.exports = {
    ...[config params],
    endOfLine: 'auto',
};

Note! Not in rules or prettier/prettier.

Info here https://prettier.io/docs/en/options.html#end-of-line

4

executing eslint for linting and fixing solved my issue.

eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore

or if you have lint script: npm run lint

1
  • Alternatively to this, you can use npm run lint if your project haves npm linting setup, for some reason on my vue 3 project vscode just get bugged ocasionally with these kind of errors as mention by OP
    – Gediminas
    Oct 31, 2022 at 10:28
3

In the root open the .editorconfig file and change:

end_of_line = lf

to

end_of_line = auto

This should fix it for new files.

0
3

What worked for me was:

  1. Update prettier to version 2.2.1 (latest version at the moment) as Roberto LL suggested. To do it execute

npm update prettier

  1. Execute lint fix as Hakan suggested (This will modify all files in the project to convert line ending to LF).

npm run lint -- --fix

It was not necessary to change .eslintrc and .prettierrc files!

3
  • 1
    prettier was up-to-date in my machine, But running npm run lint -- --fix fixed the problem.
    – Jashan PJ
    May 12, 2021 at 8:59
  • This work for me with nestjs and windows, thanks!
    – JazMagno
    Sep 18, 2021 at 0:38
  • I tried a lot of other solutions proposed here but only this resolved the issue.
    – codesnerd
    Jan 6, 2022 at 21:55
3

edit your .eslintrc.json file and update "prettier/prettier" value shown below.

I face same problem and fixed using below changes.

"prettier/prettier": [
    "error", {
         "singleQuote": true,
         "parser": "flow" 
    }
],
3
rules: {
            "prettier/prettier": [
                "error",
                {
                    endOfLine: "auto",
                },
            ],
        }

RESTART YOUR VSCODE after adding this in your project's '.eslintrc.js' file.

And also add

module.exports = { 
  endOfLine: 'auto',
  // keep other values 
}

in your project's '.prettierrc.js'

2
  • 1
    module.exports = { endOfLine: 'auto'} works Oct 31 at 7:29
  • Lots of ways do to this I see here. This one worked for me in my RN project.
    – KevinS
    Nov 25 at 3:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.