javascript - d3 使用 eslint 进行常规缩进

Question

根据d3 documentation

By convention, selection methods that return the current selection use four spaces of indent, while methods that return a new selection use only two. This helps reveal changes of context by making them stick out of the chain:

给出如下代码:

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 rule有一个 MemberExpression选项，因此您可以忽略链式方法调用的所有缩进，但我希望它强制执行，只是不同方法的不同。还有ignoredNodes可以选择忽略某些 AST 节点的选项，但我不知道从文档中是否可以选择我想要的保真度。虽然禁用对某些链接方法的检查不是很好，但总比没有好。在那种情况下，我怀疑这是一个完整的列表，但我在四空格缩进中使用的所有列表都是:

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

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

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

Answer 1

我会以不同的方式关注它，原因有两个:

跨所有 JavaScript 元素的一致编码约定
我们可以开发

自动化

作为跨平台多语言开源IDE的用户 Visual Studio 代码 ，并且由于有非常有值(value)的 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
;

这没有显示所需的格式，但这是诀窍:

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

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

日本国标