Javascript d3带eslint的常规压痕

根据

按照惯例，返回当前选择的选择方法使用四个缩进空格，而返回新选择的方法只使用两个缩进空格。这有助于揭示上下文的变化，使它们突出在外链中：

给出如下代码：

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缩进有一个MemberExpression选项，因此您可以忽略链式方法调用的所有缩进，但我希望对不同的方法实施不同的缩进。还有ignoredNodes选项，它可以选择要忽略的某些AST节点，但我从文档中不知道它是否可以选择我想要的保真度。虽然禁用某些链式方法的检查并不好，但总比什么都不做要好。在这种情况下，我怀疑这是一个全面的列表，但我在四个空格缩进中使用的所有列表都是：

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

因此，忽略具有这些名称的链式方法调用，并将所有其他方法保留在两个空格中，这将是一种权宜之计，包括与d3完全无关的方法

---

编辑：从列表中删除.data和.enter，正如Gerardo Furtado指出的那样，它们返回新的选择。

我会以不同的方式关注它，原因有二：

跨所有JavaScript元素的一致编码约定 我们可以开发 自动化 作为跨平台多语言开源IDE Visual Studio代码的用户，并且由于有非常有价值的Visual Studio代码扩展，如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
;

这并没有显示所需的格式，但关键在于：

折叠时仅显示绿色//区域内部元素线，展开时显示所有内部元素

我希望它能有所帮助，至少对于在整个开发环境中实现一致和自动化的约定是如此

---

JGB

您可能需要查找某人已经创建的插件，或者自己制作一个插件，在大多数情况下，该插件将强制使用2个空格选项卡，但为插件提供的方法名称强制使用4个空格2个选项卡。我搜索了插件，我可以通过web搜索或从令人敬畏的eslint列表中找到任何内容。我担心我可能不得不自己写，但我确实觉得奇怪，以前没有人尝试将惯用的d3 was与eslint结合使用。仅供参考，data和enter返回一个新的选择。