如何防止 Prettier / ESLint 中的代码换行

Question

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

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

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

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

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

感谢您的帮助！

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

您还可以查看：

Answer 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()

它会阻止 prettier 从一行格式化它，但我不应该使用它。

如何防止 Prettier / ESLint 中的代码换行

How do I prevent code wrapping in Prettier / ESLint

javascript

destructuring

prettier