对齐多行JS对象的最佳方法是什么？

Question

是否有一种“最佳方式”或“标准方式”来对齐JS对象？

以下是一些不同的例子：

对齐键

        var boundBox = {x: click.x - boundBoxDefaultSize/2,
                        y: click.y - boundBoxDefaultSize/2,
                        width: boundBoxDefaultSize,
                        height: boundBoxDefaultSize }

对齐冒号

        var boundBox = {x: click.x - boundBoxDefaultSize/2,
                        y: click.y - boundBoxDefaultSize/2,
                    width: boundBoxDefaultSize,
                   height: boundBoxDefaultSize }

一行

        var boundBox = {x: click.x - boundBoxDefaultSize/2, y: click.y - boundBoxDefaultSize/2, width: boundBoxDefaultSize, height: boundBoxDefaultSize }

Answer 1

那里的大多数代码都会对齐这样的对象：

var boundBox = {
      x: click.x - boundBoxDefaultSize/2,
      y: click.y - boundBoxDefaultSize/2,
      width: boundBoxDefaultSize,
      height: boundBoxDefaultSize 
}

如果它足够短，它可以全部在一行：

 var boundBox = {x:x, y:y}

我希望能帮助你。

Answer 2

我强烈推荐您使用此风格指南https://github.com/airbnb/javascript

因此，您的代码应如下所示：

var boundBox = {
  x: click.x - boundBoxDefaultSize/2,
  y: click.y - boundBoxDefaultSize/2,
  width: boundBoxDefaultSize,
  height: boundBoxDefaultSize
};

Answer 3

一行（足够的时候）很好，所以排列键。我从未见过排队冒号。如果您想要更多结构，请更好地排列键和值：

        var boundBox = {x:      click.x - boundBoxDefaultSize/2,
                        y:      click.y - boundBoxDefaultSize/2,
                        width:  boundBoxDefaultSize,
                        height: boundBoxDefaultSize };

请注意，习惯上在多行文字的大括号周围使用换行符，使其看起来不像LISP，更像是一个块：

        var boundBox = {
            x:      click.x - boundBoxDefaultSize/2,
            y:      click.y - boundBoxDefaultSize/2,
            width:  boundBoxDefaultSize,
            height: boundBoxDefaultSize
        };