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

【问题标题】：How do I prevent code wrapping in Prettier / ESLint如何防止代码包装在 Prettier / ESLint
【发布时间】：2020-07-18 20:50:14
【问题描述】：

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

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

当我点击保存时，它总是自动将代码变成这样：

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

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

感谢您的帮助！

【问题讨论】：

eslint？也许（我没有搜索配置）。更漂亮？不，我不这么认为，因为它是一个自以为是的格式化程序。
如果我自己无法做出这样的决定，这将是非常糟糕的......复杂的解构将失去它从更好的可读性中获得的所有好处。
Prettier 会像这样包装它，如果它变得足够长到最大行长度。
好处不一定是更好的可读性（尽管作者努力做到这一点）；这是为了使代码更加一致并消除差异噪音。
@DanO 我知道，但我觉得最重要的是这些好处，它也更容易阅读（如果你可以按照你想要的方式格式化）......如果代码看起来像这样@987654323 @解构至少失去了一些好处。

标签： javascript destructuring prettier

【解决方案1】：

在 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];

您也可以查看：

【讨论】：

仔细检查这与 prettier 没有冲突。

【解决方案2】：

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

Prettier 会根据打印宽度包装数组或对象，所以如果你有一个小数组，比如 webpack 中的解析：

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

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

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

这样的代码：

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

看起来很糟糕，它属于一行。也许 prettier 应该支持多行，这样人们就可以自定义他们的东西，但我不认为代码应该是这样的。

话虽如此，你可以做到：

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

它会阻止更漂亮的一行格式化它，但 IMO 你不应该使用它。

【讨论】：