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

Visual Studio-CodePrettierEslintrcPrettier Eslint

Visual Studio-Code Problem Overview


I am using vscode 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?

Visual Studio-Code Solutions


Solution 1 - Visual Studio-Code

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.

Solution 2 - Visual Studio-Code

change this setting on VSCode.

enter image description here

Solution 3 - Visual Studio-Code

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

Solution 4 - Visual Studio-Code

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/

Solution 5 - Visual Studio-Code

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

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

  }

Solution 6 - Visual Studio-Code

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

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

Solution 7 - Visual Studio-Code

Fixed - My .eslintrc.js looks like this:

module.exports = {
  root: true,
  extends: '@react-native-community',
  rules: {'prettier/prettier': ['error', {endOfLine: 'auto'}]},
};

Solution 8 - Visual Studio-Code

Try this. It works for me:

> yarn run lint --fix

or

> npm run lint -- --fix

Solution 9 - Visual Studio-Code

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/

Solution 10 - Visual Studio-Code

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

Solution 11 - Visual Studio-Code

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

Solution 12 - Visual Studio-Code

Add this to your .prettierrc file and open the VSCODE

"endOfLine": "auto"

Solution 13 - Visual Studio-Code

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

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

Solution 14 - Visual Studio-Code

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.

Solution 15 - Visual Studio-Code

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

Solution 16 - Visual Studio-Code

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.

Solution 17 - Visual Studio-Code

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',
  },
],

},

Solution 18 - Visual Studio-Code

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.

Solution 19 - Visual Studio-Code

npm run lint -- --fix

Run this command this worked for me

Solution 20 - Visual Studio-Code

I upgraded to "prettier": "^2.2.0" and error went away

Solution 21 - Visual Studio-Code

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.

Solution 22 - Visual Studio-Code

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!

Solution 23 - Visual Studio-Code

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

Solution 24 - Visual Studio-Code

There is no need to ignore linter's rule. Just auto-fix it

npm install -g prettier
prettier -w .\webpack.config.js # or other file

Solution 25 - Visual Studio-Code

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

Solution 26 - Visual Studio-Code

As you can see add this into .eslintrc works!

enter image description here

Solution 27 - Visual Studio-Code

All the answers above are correct, but when I use windows and disable the Prettier ESLint extension rvest.vs-code-prettier-eslint the issue will be fixed.

Solution 28 - Visual Studio-Code

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

Solution 29 - Visual Studio-Code

if you have already checked out the code

git config --global core.autocrlf input 


git rm --cached -r . 


git reset --hard

Solution 30 - Visual Studio-Code

Its work for me

step-1 React js root directory find .eslintrc file

Step-2 find in .eslintrc

"prettier/prettier": [
  2,
  {
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none",
    "tabWidth": 2
  }
]

replace with

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

save file and then run

npm start

Solution 31 - Visual Studio-Code

For those using @vue/prettier there may be a conflict between it and eslint which results in this error. Despite being installed along with vue cli, @vue/prettier was a temporary solution until prettier accepted vue natively and that has already been done. The problem can be solved by switching to just 'prettier'

Solution 32 - Visual Studio-Code

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

Solution 33 - Visual Studio-Code

Change file type from tsx -> ts, jsx -> js

You can get this error if you are working on .tsx or .jsx file and you are just exporting styles etc and not jsx. In this case the error is solved by changing the file type to .ts or .js

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionbier hierView Question on Stackoverflow
Solution 1 - Visual Studio-CodeVah RunView Answer on Stackoverflow
Solution 2 - Visual Studio-Codexudong zhangView Answer on Stackoverflow
Solution 3 - Visual Studio-CodeJakeView Answer on Stackoverflow
Solution 4 - Visual Studio-Codekoko-js478View Answer on Stackoverflow
Solution 5 - Visual Studio-CodeMohammed Al-ReaiView Answer on Stackoverflow
Solution 6 - Visual Studio-CodeHadiNiaziView Answer on Stackoverflow
Solution 7 - Visual Studio-CodeHamza WaleedView Answer on Stackoverflow
Solution 8 - Visual Studio-CodeHakanView Answer on Stackoverflow
Solution 9 - Visual Studio-CodeRadu LuncasuView Answer on Stackoverflow
Solution 10 - Visual Studio-CodeAshique AnsariView Answer on Stackoverflow
Solution 11 - Visual Studio-CodeWaket ZhengView Answer on Stackoverflow
Solution 12 - Visual Studio-CodeVinceView Answer on Stackoverflow
Solution 13 - Visual Studio-Codezernab hussainView Answer on Stackoverflow
Solution 14 - Visual Studio-CodeTri DawnView Answer on Stackoverflow
Solution 15 - Visual Studio-CodeRafaelFigueiredoView Answer on Stackoverflow
Solution 16 - Visual Studio-CodeDarren EvansView Answer on Stackoverflow
Solution 17 - Visual Studio-Coder4k3shView Answer on Stackoverflow
Solution 18 - Visual Studio-CodeEliasView Answer on Stackoverflow
Solution 19 - Visual Studio-CodeShamaz saeedView Answer on Stackoverflow
Solution 20 - Visual Studio-CodeRoberto LLView Answer on Stackoverflow
Solution 21 - Visual Studio-CoderichardwhateverView Answer on Stackoverflow
Solution 22 - Visual Studio-CodeCláudioView Answer on Stackoverflow
Solution 23 - Visual Studio-CodePeppersView Answer on Stackoverflow
Solution 24 - Visual Studio-CodePetr TripolskyView Answer on Stackoverflow
Solution 25 - Visual Studio-CodeShraddha GoelView Answer on Stackoverflow
Solution 26 - Visual Studio-CodeFrank GuoView Answer on Stackoverflow
Solution 27 - Visual Studio-CodeAndriyFMView Answer on Stackoverflow
Solution 28 - Visual Studio-CodesudhanshuView Answer on Stackoverflow
Solution 29 - Visual Studio-CodeKeerthi Reddy YeruvaView Answer on Stackoverflow
Solution 30 - Visual Studio-Codehariom nagarView Answer on Stackoverflow
Solution 31 - Visual Studio-CodeMithsewView Answer on Stackoverflow
Solution 32 - Visual Studio-CodeSergey BarabanovView Answer on Stackoverflow
Solution 33 - Visual Studio-CodeJaniView Answer on Stackoverflow