Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

JavascriptGulpEslintLine Endings

Javascript Problem Overview


When using eslint in the gulp project i have encountered a problem with error like this
Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style and I am using Windows environment for the running gulp and the entire error log is given below

 Kiran (master *) Lesson 4 $ gulp
 Using gulpfile c:\Users\Sai\Desktop\web-build-tools\4\
 gulpfile.js
 Starting 'styles'...
 Finished 'styles' after 17 ms
 Starting 'lint'...
 'lint' errored after 1.14 s
 ESLintError in plugin 'gulp-eslint'
 sage: Expected linebreaks to be 'LF' but found 'CRLF'.
 ails: fileName: c:\Users\Sai\Desktop\web-build-tools\4\js\extra.js

 

$>Users\Sai\Desktop\web-build-tools\4\js\extra.js
error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style

I have also including extra.js file as the error indicating possible mistake.

function getWindowHeight() {
	return window.innerHeight;
}

getWindowHeight();

Javascript Solutions


Solution 1 - Javascript

Check if you have the linebreak-style rule configure as below either in your .eslintrc or in source code:

/*eslint linebreak-style: ["error", "unix"]*/

Since you're working on Windows, you may want to use this rule instead:

/*eslint linebreak-style: ["error", "windows"]*/

Refer to the documentation of linebreak-style:

> When developing with a lot of people all having different editors, VCS > applications and operating systems it may occur that different line > endings are written by either of the mentioned (might especially > happen when using the windows and mac versions of SourceTree > together). > > The linebreaks (new lines) used in windows operating system are > usually carriage returns (CR) followed by a line feed (LF) making it a > carriage return line feed (CRLF) whereas Linux and Unix use a simple > line feed (LF). The corresponding control sequences are "\n" (for LF) > and "\r\n" for (CRLF).

This is a rule that is automatically fixable. The --fix option on the command line automatically fixes problems reported by this rule.

But if you wish to retain CRLF line-endings in your code (as you're working on Windows) do not use the fix option.

Solution 2 - Javascript

I found it useful (where I wanted to ignore line feeds and not change any files) to ignore them in the .eslintrc using linebreak-style as per this answer: https://stackoverflow.com/a/43008668/1129108

module.exports = {
  extends: 'google',
  quotes: [2, 'single'],
  globals: {
    SwaggerEditor: false
  },
  env: {
    browser: true
  },
  rules:{
    "linebreak-style": 0
  }
};

Solution 3 - Javascript

If you are using vscode and you are on Windows i would recommend you to click the option at the bottom-right of the window and set it to LF from CRLF. Because we should not turn off the configuration just for sake of removing errors on Windows

If you don't see LF / CLRF, then right click the status bar and select Editor End of Line.

menu

Solution 4 - Javascript

Here is a really good way to manage this error. You can put the below line in .eslintrc.js file.

Based on the operating system, it will take appropriate line endings.

rules: {
        'linebreak-style': ['error', process.platform === 'win32' ? 'windows' : 'unix'],
 }

Solution 5 - Javascript

If you want it in crlf (Windows Eol), go to File -> Preferences -> Settings. Type "end of line" in the User tab and make sure Files: Eol is set to \r\n and if you're using the Prettier extension, make sure Prettier: End of Line is set to crlf. enter image description here Finally, on your eslintrc file, add this rule: 'linebreak-style': ['error', 'windows'] enter image description here

Solution 6 - Javascript

add to our rule in the .eslintrc file 'linebreak-style':0 in Vue js

  rules: {
    'linebreak-style':0,
  }

enter image description here

Solution 7 - Javascript

Just made autocrlf param in .gitconfig file false and recloned the code. It worked!

[core] autocrlf = false

Solution 8 - Javascript

Happen with me because I ran git config core.autocrlf true and I forgot to rever back.

After that, when I checkout/pull new code, all LF (break line in Unix) was replaced by CRLF (Break line in Windows).

I ran linter, and all error messages are Expected linebreaks to be 'LF' but found 'CRLF'

To fix the issue, I checked autocrlf value by running git config --list | grep autocrlf and I got:

core.autocrlf=true
core.autocrlf=false

I edited the global GIT config ~/.gitconfig and replaced autocrlf = true by autocrlf = false.

After that, I went to my project and do the following (assuming the code in src/ folder):

CURRENT_BRANCH=$(git branch | grep \* | cut -d ' ' -f2);
rm -rf src/*
git checkout $CURRENT_BRANCH src/

  

Solution 9 - Javascript

If you are using vscode I would recommend you to click the option at the bottom-right of the window and set it to LF from CRLF..this fixed my errors

Solution 10 - Javascript

The same situation occurred when I was using VSCode with eslint. If you use VSCode,

1 - Click area that name can be both LF or CRLF where at the bottom right of the VScode.

2 - Select LF from the drop-down menu.

That's worked for me.

enter image description here

Solution 11 - Javascript

git config core.autocrlf false

git rm --cached -r .

git reset --hard

Solution 12 - Javascript

If you are using WebStorm and you are on Windows i would recommend you to click settings/editor/code style/general tab and select "windows(\r\n) from the dropdown menu.These steps will also apply for Rider.

enter image description here

Solution 13 - Javascript

In my case (vue.js project, created using vue-cli) the lint problem Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style was related to Prettier. From version >= 2 Prettier replace all line endings with "lf": https://prettier.io/docs/en/options.html#end-of-line

Since I'm using Windows to develop I set these 3 (git, eslint, prettier) configuration to avoid line endings problems:

  1. Git: I set git config --global core.autocrlf true
  2. eslint: in .eslintrc.js file I configured:
      module.exports = {
      rules: {
        'linebreak-style': ['error', 'windows'],
      },
    };
  1. prettier: And finally in prettier.config.js:
module.exports = {
    endOfLine: "crlf",
};

Solution 14 - Javascript

Try using the linter's --fix flag to resolve the issue.

> eslint filePath --fix

Solution 15 - Javascript

Tips: Make sure you have installed Git as the picture if not do that first. You can take other features as default, You can choose visual studio code as the default editor. helps you a lot later.

enter image description here

Windows Users: Uninstall Visual Studio Code then reinstalled it again and EditorConfig should work just fine.

NOTE => Uninstalling Visual Studio Code still leaves the old settings and extensions! remove Visual Studio Code on Windows completely

Uninstalled Visual Studio

  1. This PC > Local disck (C) Users > CurrentUser > AppData > Local > Programs > Microsoft VS Code
    1. Unins000.exe or Uninstall it from conrol panel
  2. This PC > Local disck (C) Users > CurrentUser > AppData > Local > Roaming
    1. Code => Folder should be delete it
  3. This PC > Local disck (C) Users > CurrentUser >
    1. .vscode => Folder should be delete it
  4. reinstall vs code it should work now.

Solution 16 - Javascript

I just want to add the easier way. On the bottom right of VScode click the LF or CRLF to toggle between them. See Photo

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
QuestionSaiKiranView Question on Stackoverflow
Solution 1 - JavascriptDheeraj VepakommaView Answer on Stackoverflow
Solution 2 - JavascriptThe CoderView Answer on Stackoverflow
Solution 3 - JavascriptMr_PerfectView Answer on Stackoverflow
Solution 4 - JavascriptH_HView Answer on Stackoverflow
Solution 5 - JavascriptCLUTCHERView Answer on Stackoverflow
Solution 6 - JavascriptFrancisco EstradaView Answer on Stackoverflow
Solution 7 - JavascriptvnxyzView Answer on Stackoverflow
Solution 8 - JavascriptAbdennour TOUMIView Answer on Stackoverflow
Solution 9 - JavascriptAthif ShaffyView Answer on Stackoverflow
Solution 10 - JavascriptSerhan C.View Answer on Stackoverflow
Solution 11 - JavascriptHakan YıldırımView Answer on Stackoverflow
Solution 12 - Javascriptbinary_fmView Answer on Stackoverflow
Solution 13 - JavascriptmatteogllView Answer on Stackoverflow
Solution 14 - Javascriptuser8818954View Answer on Stackoverflow
Solution 15 - JavascriptRashid QazizadaView Answer on Stackoverflow
Solution 16 - Javascriptuser2098296View Answer on Stackoverflow