Prettier + eslint line breaks

DaveJ picture DaveJ · Nov 29, 2017 · Viewed 7.3k times · Source

I am using eslint with VSCode 1.18.1 and the prettier/prettier extension 0.26.0 for VSCode. In my VSCode config I have "prettier.eslintIntegration": true,. My dependencies used to be:

"eslint": "^3.19.0",
"eslint-config-airbnb-base": "^11.1.3",
"eslint-plugin-import": "^2.2.0",

Typically prettier-eslint formatted like this:

return somePromise.then(result =>
  someOtherPromise(result, { foo: 'bar' })
);

Then I upgraded to:

"eslint": "^4.11.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.8.0",

And now prettier-eslint is formatting files like this instead:

return somePromise.then(result =>
  someOtherPromise(result, { foo: 'bar' }));

This is a trivial example but if indentation goes a couple of levels deep then it becomes difficult to read. I prefer the old style.

Is it possible to achieve the previous formatting style with the upgraded dependencies?

Answer

DaveJ picture DaveJ · Nov 29, 2017

Managed to fix it by adding the rules from eslint-config-prettier.

In my .eslintrc.js:

module.exports = {
  extends: ["airbnb-base", "prettier"],
  //...
}