d3 使用 eslint 的常規縮進

Question

根據d3 文檔

按照慣例，返回當前選擇的選擇方法使用四個縮進空格，而返回新選擇的方法只使用兩個縮進。 這有助於通過使它們脫離鏈來揭示上下文的變化：

給出如下代碼：

d3.select("body")
  .append("svg")
    .attr("width", 960)
    .attr("height", 500)
  .append("g")
    .attr("transform", "translate(20,20)")
  .append("rect")
    .attr("width", 920)
    .attr("height", 460);

有沒有辦法配置 eslint 來處理這個問題，這樣它就不會不斷抱怨意外的縮進級別？

eslint indent規則有一個MemberExpression選項，因此您可以忽略鏈式方法調用的所有縮進，但我希望強制執行它，只是對於不同的方法不同。 還有ignoredNodes選項可以選擇某些要忽略的 AST 節點，但我不知道文檔中是否可以選擇我想要的保真度。 雖然禁用對某些鏈式方法的檢查並不是很好，但總比沒有好。 在這種情況下，我懷疑這是一個全面的列表，但我在四個空格縮進中使用的所有列表是：

.attr()
.style()
.text()
.call()
.on()

因此，某些方法可以忽略具有這些名稱的鏈式方法調用，並將所有其他方法保留在兩個空格中，這將是一個不錯的權宜之計（包括與 d3 完全無關的方法）。

編輯：從列表中刪除.data()和.enter() ，因為 Gerardo Furtado 指出它們返回新的選擇。

Answer 1

我會以不同的方式關注它，原因有兩個：

1. 我們可能開發的所有 JavaScript 元素都采用一致的編碼約定
2. 自動化

作為跨平台多語言開源 IDE Visual Studio Code 的用戶，並且由於有非常有價值的 Visual Studio Code 擴展，例如JS-CSS-HTML Formatter (Id: lonefy.vscode-js-css-html-formatter ，當前工作版本 0.2.3），我編寫代碼並在需要時自動縮進。

對於這種特殊情況，我們將使用該擴展在每次保存時自動修改 Javascript 代碼，因為它使用適當的約定格式化代碼。

我有添加內置注釋區域（以灰色標記）的解決方法，以便您可以在折疊代碼時以與縮進類似的方式幫助代碼可視化，這將是保存后的結果：

d3.select("body")
    //#region svg
    .append("svg")
    .attr("width", 960)
    .attr("height", 500)
    //#endregion
    //#region g
    .append("g")
    .attr("transform", "translate(20,20)")
    //#endregion
    //#region rect
    .append("rect")
    .attr("width", 920)
    .attr("height", 460)
    //#endregion
;

這沒有顯示所需的格式，但這里有訣竅：

折疊時只顯示綠色//#region 內部元素線，展開時顯示所有內部元素

我希望它有所幫助，至少對於跨開發情況的一致和自動化約定。

JGB