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 来处理这个问题，这样它就不会不断抱怨意外的缩进级别？

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

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

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

编辑：从列表中删除.data()，.enter()因为 Gerardo Furtado 指出他们返回了新的选择。

标签： javascriptd3.jseslint

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

我们可能开发的所有 JavaScript 元素的一致编码约定
自动化

作为跨平台多语言开源 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 内部元素行，展开时显示所有内部元素

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

日本国标

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

问题描述

解决方案

推荐阅读