How can I write a ESLint rule for "linebreak-style", changing depending on Windows or Unix?

JavascriptWindowsUnixEslintLine Endings

Javascript Problem Overview


As we all know, the linebreaks (new line) used in Windows are usually carriage returns (CR) followed by a line feed (LF) i.e. (CRLF) whereas, Linux and Unix use a simple line feed (LF)

Now, in my case, my build server uses supports Linux and Unix format so, below rule is working perfectly on build server:

linebreak-style: ["error", "unix"]

But I am doing development on Windows and I need to update rule on each git pull/git push as below,

linebreak-style: ["error", "windows"]

So, is there any way to write a generic linebreak-style rule to support both environments, Linux/Unix and Windows?

Note: I am using ECMAScript6[js], WebStorm[ide] for development

Any solutions/suggestions would be highly appreciated. Thanks!

Javascript Solutions


Solution 1 - Javascript

I spent time trying to find how to shut off the linkbreak-style and lost it due to reverting some of my code I thought others my like to have this as well.

In the .eslintrc file you can also set linebreak-style to 0 which shuts off the linebreak feature:

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

Solution 2 - Javascript

The eslint configuration file can be a regular .js file (ie, not JSON, but full JS with logic) that exports the configuration object.

That means you could change the configuration of the linebreak-style rule depending on your current environment (or any other JS logic you can think of).

For example, to use a different linebreak-style configuration when your node environment is 'prod':

module.exports = {
    "root": true,
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 6
    },
    "rules": {
        // windows linebreaks when not in production environment
        "linebreak-style": ["error", process.env.NODE_ENV === 'prod' ? "unix" : "windows"]
    }
};

Example usage:

$ NODE_ENV=prod node_modules/.bin/eslint src/test.js

src/test.js
  1:25  error  Expected linebreaks to be 'CRLF' but found 'LF'  linebreak-style
  2:30  error  Expected linebreaks to be 'CRLF' but found 'LF'  linebreak-style
  3:36  error  Expected linebreaks to be 'CRLF' but found 'LF'  linebreak-style
  4:26  error  Expected linebreaks to be 'CRLF' but found 'LF'  linebreak-style
  5:17  error  Expected linebreaks to be 'CRLF' but found 'LF'  linebreak-style
  6:50  error  Expected linebreaks to be 'CRLF' but found 'LF'  linebreak-style
  7:62  error  Expected linebreaks to be 'CRLF' but found 'LF'  linebreak-style
  8:21  error  Expected linebreaks to be 'CRLF' but found 'LF'  linebreak-style

āœ– 8 problems (8 errors, 0 warnings)

$ NODE_ENV=dev node_modules/.bin/eslint src/test.js
$ # no errors

Solution 3 - Javascript

In your .eslintrc.js:

"rules": {
  "linebreak-style": ["error", (process.platform === "win32" ? "windows" : "unix")], // https://stackoverflow.com/q/39114446/2771889
}

See also: https://stackoverflow.com/questions/8683895/how-do-i-determine-the-current-operating-system-with-node-js

Solution 4 - Javascript

.eslintc for Windows visualstudio code

{
  "env": {
    "node": true
  },
  "rules":{
    "linebreak-style": 0
  }
}

Solution 5 - Javascript

If you're using Vs Code on Windows, go to your ".eslintrc.json" file (or '.js' depending on which option you chose when setting up your ESLint); this file will usually be found in the root folder of your project; and under rules add the linebreak option to use Windows CRLF as follows:

"rules": {
    "linebreak-style": ["error", "windows"]
}

Save the file and when you go back to your JavaScript file, all those pesky red lines will disappear.

Solution 6 - Javascript

A better option

.editorconfig end_of_line

Add the end_of_line rule in .editorconfig file:

[*]
end_of_line= lf

EditorConfig is an extension for most code editors nowadays that changes the contents of the file you just saved. This rule enforces that all line endings are always unix consistent (\n) each time a developer saves a file (note: MacOs no longer uses \r => cr). For enforcing windows line endings (\r\n) use crlf.

This option is preferable since it avoids all line ending changes to be recorded in the project's repository (version control).

Not so optimal options...

As an EditorConfig note mentions:

> if you want to use native line endings between different OSes, it is better not to set this option and leave that task to the VCS! In the future we might add a value like native for this scenario (cf #226).

This would be a replacement for the accepted answer's solution:

"linebreak-style": process.env.NODE_ENV === 'prod' ? "unix" : "windows"

Which is still better than completely disabling the rule ("linebreak-style": 0): developers/contributors inconsistently may use their preferred line endings in the same file...

Solution 7 - Javascript

There are a few answers playing around with.eslintrc and one even suggest switching off the rule altogether.

However, what I prefer is to change VCS settings to checkout LF instead of CRLF. Assuming even in windows env, modern IDE should handle LF just fine. The drawback is some windows software like notepad aren't going to like it. But this way you will be warned if you have incorrect linebreak style. And it is less likely for people to commit incorrect linebreak style even if their VCS is misconfigured. Simply run git config --global core.autocrlf false or follow instructions on https://stackoverflow.com/questions/2517190/how-do-i-force-git-to-use-lf-instead-of-crlf-under-windows

Anyway, turning off the rule is discouraged in general as this will impact other team members, unless you have all of team's consent.

Solution 8 - Javascript

The location of the config file required to alter ESLint rules for linebreak-style may change depending on whether you want to alter local, project or global settings, it searches for local first which overrides those further up the tree, so alter at the top of the tree to propagate down for global

I used airbnb style and my global settings were located here: node_modules/eslint-config-airbnb-base/rules/style.js:

If you are unsure on the location of the file you can always search for a list of files that contain text relating to the settings, on Linux to find all files with linebreak settings navigate to the folder where ESLint was installed and use:

grep -r linebreak

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
QuestionRavindra ThoratView Question on Stackoverflow
Solution 1 - JavascriptStuView Answer on Stackoverflow
Solution 2 - JavascriptvitorbalView Answer on Stackoverflow
Solution 3 - JavascriptthisismydesignView Answer on Stackoverflow
Solution 4 - JavascriptAndyCView Answer on Stackoverflow
Solution 5 - JavascriptRaymond WachagaView Answer on Stackoverflow
Solution 6 - JavascriptCPHPythonView Answer on Stackoverflow
Solution 7 - JavascriptseanplwongView Answer on Stackoverflow
Solution 8 - JavascriptLeigh MathiesonView Answer on Stackoverflow