如何防止Prettier / ESLint对代码进行换行

Question

我正在努力查找Prettier/ESLint配置中的设置，使我的代码像这样包装：

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

当我点击保存时，它总是自动将代码更改为以下内容：

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

这个简单的演示也许不是什么大问题，但是在更复杂的解构操作中，这样一行代码可能会变得难以理解。

感谢您的帮助！

- David Haase

---

eslint？也许吧（我还没有搜索配置）。Prettier？不，我不这么认为，因为它是一种有观点的格式化程序。 - evolutionxbox

如果没有办法自己设置这样的决定，那将会非常糟糕...... 复杂的解构将失去其从更好的可读性中获得的所有优势。 - David Haase

如果行长超过了最大行长，Prettier会像这样进行换行。 - Barry Michael Doyle

好处并不一定是更好的可读性（尽管作者们努力让它成为这种情况）；它的作用是使代码更加一致，并消除差异噪音。 - Dan O

@DanO 我知道，但我觉得除了这些好处之外，如果你可以按照自己的格式进行编排，它也更容易阅读... 如果代码看起来像这样 var object = { 'a': [{ 'b': { 'c': 3 } }] }; 解构至少会失去一些其优点。 - David Haase

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

您还可以查看以下内容：

• 数组括号换行
• 函数括号换行
• 对象花括号换行
• 对象属性换行
• 函数调用参数换行
• 链式调用每行换行

- palaѕн

---

请确保这不会与 prettier 冲突。 - evolutionxbox

Answer 2

Prettier会覆盖eslint的所有操作，因此如果项目中还有prettier，使用eslint并不能真正帮助您（在eslint之后应该运行prettier）。Prettier没有任何控制您所要求内容的方法，关于多行样式的讨论已经有过几次，但通常由于充分的原因而不会得到解决。

Prettier将根据打印宽度包装数组或对象，因此如果您有一个像webpack中的resolves这样的小数组：

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

Prettier 会将它写成单行，因为在多行中写这个看起来确实很愚蠢。对于类似 jest 扩展或插件的任何类似内容，都是一样的，其中整个数组中只有一个条目，例如 plugins: ["react"]，如果仅因为一个条目而将其放在多行上，那么看起来也很愚蠢。

然而，当项目占据了超过默认打印宽度（80）时，Prettier 会将其包装。对我而言，这真的是应该的方式，我不想要一堆 4 个字符的多行，当它被包装在一个侧向数组中时，它看起来更整洁，而当内部项目更长时，它也可以完美地多行显示。

像这样的代码：

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

这看起来很糟糕，它应该在一行上。也许更好的方式是支持多行，以便人们可以自定义他们的内容，但我认为代码不应该这样写。

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

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

这将防止prettier对其进行一行格式化，但我认为您不应该使用它。

- user16435030

---

认为将事物放在不同的行上“看起来非常愚蠢”（对于你来说）是一种相当无知的说法，这种言辞不应该出现在答案中。首先，美感和可读性完全是主观的。其次，有一个非常广泛的实用理由可以使用多行，那就是它可以更好地进行差异比较。 - Wayne Bloss