如何防止代码包装在 Prettier / ESLint

Question

我正在努力在我的 Prettier / ESLint 配置中找到一个设置，它允许我像这样包装我的代码：

var [
  first,
  second,
  third,
  etc,
] = data();

当我点击保存时，它总是自动将代码转换为：

var [first, second, third, etc] = data();

对于这个简单的演示，这可能不是什么大问题，但是对于更复杂的解构，这一行将变得难以阅读。

谢谢您的帮助！

Answer 1

Prettier 无论如何都会覆盖 eslint 所做的任何事情，因此如果您在项目中也有 prettier（prettier 也应该在 eslint 之后运行），那么使用 eslint 并不会真正帮助您。 Prettier 没有任何方法可以控制您要问的内容，有几个关于多行样式的 github 讨论，但由于充分的理由，他们通常不会在任何地方进行 go。

Prettier 将根据打印宽度包装 arrays 或对象，因此如果您有一小部分内容，例如在 webpack 中解析：

resolves: ['.tsx', '.ts', '.jsx', '.js']

Prettier 会将其写入单行，因为在多行中写入看起来真的很愚蠢。 这同样适用于任何类似的东西，比如 jest 扩展或插件，其中在整个数组中只有一个条目，如plugins: ["react"] ，仅仅因为一个条目而将它放在多行上看起来真的很愚蠢。

然而，一旦项目占用超过打印宽度（默认为 80），Prettier 就会将其包装起来。对我来说，这确实是应该的方式，我不想要一堆 4 个字符的多行，它看起来不错当它被包裹在一个侧面的阵列中时会更整洁，而当里面的物品更长时，它也可以完美地多线化。

像这样的代码：

var [
  first,
  second,
  third,
  etc,
] = data()

看起来真的很糟糕，它属于单行。 也许更漂亮的应该支持多行，这样人们就可以自定义他们的东西，但我永远不会在我的项目中允许这样的代码。

话虽如此，您可以这样做：

var [
  first,  //
  second,
  third,
  etc,
] = data()

它会阻止更漂亮的线条样式，但IMO你不应该使用它。

Answer 2

在 Eslint 中，您可以使用选项array-element-newline在数组元素之间强制换行：

不正确的代码：

/*eslint array-element-newline: ["error", "always"]*/
var d = [1, 2, 3];

正确代码：

/*eslint array-element-newline: ["error", "always"]*/
var d = [1,
    2,
    3];

您还可以查看：

• 数组括号换行
• 函数-paren-换行符
• 对象卷曲换行符
• 对象属性换行符
• 函数调用参数换行符
• 链式调用换行