Prettier-eslint: Prettier ignoring eslint rule: operator-linebreak

[ryanwoodcox]

Versions:

• prettier-eslint version: 8.8.2
• node version: 8.11.3
• npm version: 6.2.0

What I did:
I formatted a javascript file with prettier installed within VSCode.

What happened:
Prettier moved my operators to the end of the line before the line break even though my eslint rule is: 'operator-linebreak': ['error', 'before'] .

Problem description:
It seems prettier is ignoring the operator-linebreak option.

Code Sample

    testMe() {
      const someVariable = {};

      return (
        someVariable &&
        someVariable.someProp &&
        someVariable.someProp.someArray.find(thing => thing > 99)
      );
    }

[zimme]

Yes, that is correct. Prettier doesn't have a config for this styling which means that we can't change prettiers behaviour for this based on the eslint config.

I'd recommend using eslint-config-prettier when using this package as it will disable all eslint rules that conflict with prettier's styling.

edit: Also most eslint rules's auto fixes isn't able to rearrange code on different lines.

[ryanwoodcox]

@zimme Note: If I manually run eslint --fix on my target file it fixes the operator linebreak issue.

So, help me understand why I'm having this issue if the description of this prettier-eslint package is: Formats your JavaScript using prettier followed by eslint --fix.

[zimme]

That is weird... I'll look into it.

[zimme]

Just to double check, you have set prettier.eslintIntegration to true in the vscode settings so that vscode's prettier extension is using prettier-eslint, right?

[zimme]

If you use prettier-eslint-cli to lint the file, do you still get the same problem?

[ryanwoodcox]

Correct, prettier.eslintIntegration is set to true in my VSCode User Settings, as well as prettier-eslint installed as a dev-dependency.

[ryanwoodcox]

After closing VSCode and relaunching it, things are working on my .js file. The same code in a .vue file in a script tag is suffering the same problem. Note: Formatting is happening within the vue file but the operators all end up at the end of the line still.

[ryanwoodcox]

To answer the question about prettier-eslint-cli, no, I did not get proper formatting. The .vue file remains with the && operator at the end of the line before the line break.

[MarcosRZ]

I solved it by disabling tslint autofix on save setting. I usually work with Angular7 and I have both ESLint and TSLint extensions installed. It seems that I configured tslint globally and it was being applied in ES6 projects too. I don't know why it is being applied to js extension files but it does.

Just commented out this line in settings.json:

// "tslint.autoFixOnSave": true,

[tohagan]

Looks like this is in part a limitation of Prettier.

• You can up-vote this issue at https://github.com/prettier/prettier/issues/3806

[github-actions[bot]]

Stale issue