Preventing chained calls on multiple lines doesn't work

[bennycode]

• prettier-eslint-cli version: 4.4.0
• prettier version: 1.7.4
• eslint version: 4.8.0

Relevant code/config.

.eslintrc.json

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jasmine": true,
    "node": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": [
    "prettier",
    "react"
  ],
  "rules": {
    "brace-style": [
      "error",
      "1tbs"
    ],
    "comma-dangle": [
      "error",
      "always-multiline"
    ],
    "comma-spacing": [
      "error",
      {
        "after": true,
        "before": false
      }
    ],
    "comma-style": [
      "error",
      "last"
    ],
    "complexity": "error",
    "newline-per-chained-call": [
      "error",
      {
        "ignoreChainWithDepth": 10
      }
    ]
  }
}

.prettierrc.json

{
  "bracketSpacing": false,
  "jsxBracketSameLine": false,
  "printWidth": 120,
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}

What you did:

I would like to stop Prettier from turning this:

exports.up = (knex, Promise) => {
  return Promise.all([
    knex.schema.alterTable('categories', table => {
      table.timestamp('created_at').notNullable().defaultTo('2013-12-31 12:17:10.0');
      table.timestamp('updated_at').notNullable().defaultTo('2013-12-31 12:17:10.0');
    }),
  ]);
};

Into:

exports.up = (knex, Promise) => {
  return Promise.all([
    knex.schema.alterTable('categories', table => {
      table
        .timestamp('created_at')
        .notNullable()
        .defaultTo('2013-12-31 12:17:10.0');
      table
        .timestamp('updated_at')
        .notNullable()
        .defaultTo('2013-12-31 12:17:10.0');
    }),
  ]);
};

Therefore I defined "newline-per-chained-call" in my ESLint config and as far as I understood, Prettier runs before ESLint, so my ESLint should override Prettier's output but it doesn't seem to happen.

What happened / Problem:

Prettier is still breaking up my chained method calls.

[zimme]

prettier is breaking up the chained method calls and eslint doesn't have the ability to fix that back.

I don't know if we can solve this, but I'm open to suggestions.

I recommend using eslint-config-prettier with this package to make sure prettier gets to handle conflicting rules and eslint takes care of the things prettier can't handle.

[Samuel-Montoya]

Did this get resolved? I'm currently having this same exact issue.

[bekliev]

I'm having this issue too! And I'm using eslint. And cause of that I do not enable Prettier's editor.formatOnSave option in VSCode.

In some old projects I'm using jquery code with so much chains so I wanna turn off this behavior in prettier but can't. How to turn it off?

[Base29]

I am having the same issue ... so is there a way to stop breaking the chained calls ... eslint-config-prettier didn't worked for me.

[zimme]

The way to solve this, at the moment, is to not use prettier and only use eslint as it's prettier that breaks up the chained calls.

There's an open issue about fixing this behaviour in prettier.

Today, eslint, doesn't seem to be smart enough to fix the output from prettier when it comes to chained calls and there isn't an option in prettier to change how it outputs chained calls.

I'm closing this as it's out of our hands.

Edit: Here's the link to the open issue. https://github.com/prettier/prettier/issues/3107