prettier conflicts with no-unexpected-multiline

[sudo-suhas]

This scenario is relevant when a shareable config like airbnb-base is combined with prettier. If the rule no-unexpected-multiline is enabled, it ends up resulting in a error which can only be resolved by switching off the rule.

.eslintrc.yml

extends: prettier
plugins:
  - prettier
parserOptions:
  ecmaVersion: 8
  sourceType: script
rules:
  no-undef: off
  no-unused-vars: off
  no-unexpected-multiline: error
  prettier/prettier:
    - error
    -
      trailingComma: none
      singleQuote: true
      printWidth: 80
      tabWidth: 4

code snippet

const value =
    Array.isArray(param) && spread
        ? getInstance()
              [methodName](...param)
              .toJSON()
        : getInstance()
              [methodName](param)
              .toJSON();

Eslint output:

  4:15  error  Unexpected newline between object and [ of property access  no-unexpected-multiline
  7:15  error  Unexpected newline between object and [ of property access  no-unexpected-multiline

If I fix the errors:

  3:24  error  Insert `⏎··············`  prettier/prettier
  5:24  error  Insert `⏎··············`  prettier/prettier

[lydell]

Thanks for the clear issue!

See previous discussion here: #8 (and #25)

One way is to simply turn the rule off always. But is there any case we lose where this rule would have caught an error?

[sudo-suhas]

I did see the previous discussion. W.r.t this particular rule, the plan was to revisit it in the future if the need were to arise. Indeed, turning off the rule works but I am proposing that eslint-config-prettier should do it and I'd be happy to make a PR for it if required. And no, the rule doesn't catch a syntax error at least in this case.

[lydell]

Sorry, I meant "one way is to include this rule in this config to be always turned off". I'm just worried that turning this rule off means people will miss out on ESLint helping them find semicolon mistakes. Perhaps this should be one of the "special rules". I use this rule myself, and have never encountered conflicts with Prettier so far, but it does depend on how you write your code.

My point is that this issue needs a little experimentation and thinking about.

[lydell]

I've now come to the conclusion that we should add the rule as a special rule.

[sudo-suhas]

Ok @lydell, I'd like to work on this. But I might need some help with updating the readme though.

[lydell]

You can make a PR if you want and I can help getting it across the finish line.

[lydell]

Released in 2.7.0.

[andreyvolokitin]

I am not sure if I run ESLint before Prettier with this config (Prettier as ESLint plugin) and thus can turn "no-unexpected-multiline": "error" on?:

{
  "extends": [
    "airbnb-base",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "no-unexpected-multiline": "error"
  },
  "plugins": [
    "prettier"
  ]
}

[lydell]

@andreyvolokitin With that config Prettier essentially runs at the same time as ESLint, unless you use the --fix flag which basically causes Prettier to run first.

[yaminyaylo]

As a solution you can use "prettier.printWidth": 100)(or more setting to extend line

[mbrookes]

I have this error, however after disabling no-unexpected-multiline, the next prettier run reformats the code such that the error comes back:

         };
       };
     })
-    // eslint-disable-next-line no-unexpected-multiline
-    ["catch"](function(error) {
+    [
+      // eslint-disable-next-line no-unexpected-multiline
+      "catch"
+    ](function(error) {
       console.error("Error during service worker registration:", error);
     });
 }

[lydell]

@mbrookes Ah, that’s unfortunate that Prettier moves the comment in that scenario. There are a couple of ways to go:

• Use /* eslint-disable no-unexpected-multiline */ and /* eslint-enable no-unexpected-multiline */ around the whole thing.

• Use .catch instead of ["catch"].

• Use .then(null, fn) instead of .catch(fn).

• Use a temporary variable and put the ["catch"] on that.