eslint object-curly-newline conflicts prettier multi-line rationale

Question

I'm new in prettier + typescript + eslint. Most of the integration works fine but multi-line in destructure object is not.

Prettier 1.19.1 Playground link

Input:

const {
  ciq,
  drawingMenuX,
  drawingMenuY,
  selectedDrawing,
} = store.chartStore;

Output:

const { ciq, drawingMenuX, drawingMenuY, selectedDrawing } = store.chartStore;

Expected behavior:

const {
  ciq,
  drawingMenuX,
  drawingMenuY,
  selectedDrawing,
} = store.chartStore;

I wanna keep a multiline format in destructure object like the rationale (https://prettier.io/docs/en/rationale.html#multi-line-objects)

It works well in a normal object but it's not in destructure object

How can I fix this problem? Do I just have to fix each line?

package.json

"@typescript-eslint/eslint-plugin": "^2.11.0",
"@typescript-eslint/parser": "^2.11.0",
"eslint": "^6.7.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.19.1",

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ['plugin:react/recommended', 'plugin:prettier/recommended', 'airbnb'],
  plugins: ['react', '@typescript-eslint'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    ],

    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],

    'no-confusing-arrow': [0],
  },

  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
      },
    },
  ],
};

Answer 1

I prefer the way Prettier handles this as well.

In your .eslintrc.js add this to your rules.

'object-curly-newline': 'off',

Answer 2

I was having same issue and didn't want to turn it off completely. Fortunately, there is a configuration-option for this rule, which you can look up here object-curly-newline

It allows configuring line breaks if there are line breaks inside properties, between properties and even least number of properties or even to enforce consistency (both curly braces, or neither directly enclose newlines).

Here is how I am using it:

/* inside .eslintrc.json */

"rules": {
  "object-curly-newline": [
    "error",
    {
      "ObjectExpression": { "consistent": true, "multiline": true },
      "ObjectPattern": { "consistent": true, "multiline": true },
      "ImportDeclaration": "never",
      "ExportDeclaration": { "multiline": true, "minProperties": 3 }
    }
  ]
}