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?
'plugin:prettier/recommended'
from the extends array should fix the issue.
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.
change this setting on VSCode.
https://i.stack.imgur.com/YkKpb.png
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.
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
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/
in the file .eslintrc.json in side roles add this code it will solve this issue
"rules": {
"prettier/prettier": ["error",{
"endOfLine": "auto"}
]
}
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
Fixed - My .eslintrc.js looks like this:
module.exports = {
root: true,
extends: '@react-native-community',
rules: {'prettier/prettier': ['error', {endOfLine: 'auto'}]},
};
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/
Try this. It works for me:
yarn run lint --fix
or
npm run lint -- --fix
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
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"
}
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.
Add this to your .prettierrc file and open the VSCODE
"endOfLine": "auto"
Add these below rule in .eslintrc file and then restart your project.
rules: {
'prettier/prettier': ['error', { "endOfLine": "auto"}, { usePrettierrc: true }],
}
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"
}],
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.
I was having the same problem in my nest js app . Adding the below code to .eslintrc.js
rules 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',
},
],
},
npm run lint -- --fix
Run this command this worked for me
As you can see add this into .eslintrc works!
https://i.stack.imgur.com/i633N.png
https://i.stack.imgur.com/lxxuv.png
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.
input
? How else this suggestion is different from that by koko-js478?
I upgraded to "prettier": "^2.2.0" and error went away
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.
What worked for me was:
Update prettier to version 2.2.1 (latest version at the moment) as Roberto LL suggested. To do it execute
npm update prettier
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
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
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
--global
flag. Also, you don't need to delete the entire repo and clone it again, just resetting the branch to origin should work.
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"
}
],
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
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.
if you have already checked out the code
git config --global core.autocrlf input
git rm --cached -r .
git reset --hard
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
Success story sharing
.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).CRLF
toLF
worked for me, on a windows machine.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" }] } }