eslint object-curly-newline 冲突更漂亮的多行基本原理

Question

我是漂亮 + 打字稿 + eslint 的新手。大多数集成工作正常，但解构对象中的多行则不然。

Prettier 1.19.1 游乐场链接

输入：

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

输出：

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

预期行为：

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

我想在像基本原理一样的解构对象中保留多行格式（https://prettier.io/docs/en/rationale.html#multi-line-objects）

它适用于普通对象，但不适用于解构对象

我该如何解决这个问题？我只需要修复每一行吗？

包.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

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

Answer 1

我遇到了同样的问题，但不想完全关闭它。幸运的是，此规则有一个配置选项，您可以在此处查找object-curly-newline

如果属性内部、属性之间甚至最少数量的属性之间存在换行符，它允许配置换行符，甚至可以强制一致性（两个花括号，或者都不直接括起换行符）。

这是我的使用方法：

/* 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 }
    }
  ]
}

Answer 2

我也更喜欢 Prettier 处理这个问题的方式。

在您.eslintrc.js将其添加到您的rules.

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