d3常规压痕与eslint

Question

根据d3文档(https://github.com/d3/d3-selection)

按照惯例,返回当前选择的选择方法使用四个缩进空间,而返回新选择的方法仅使用两个.这有助于通过使它们脱离链条来揭示上下文的变化:

提供如下代码:

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规则(https://eslint.org/docs/rules/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 内部元素线，展开时显示所有内部元素

我希望它能有所帮助，至少能够在您的开发环境中实现一致且自动化的约定。

日本国宝