如何防止代碼包裝在 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-換行符
• 對象卷曲換行符
• 對象屬性換行符
• 函數調用參數換行符
• 鏈式調用換行