Js-beautify: 在单行上保留或内联“短对象”的选项

创建于 2013-08-14 · 109评论 · 资料来源: beautify-web/js-beautify

通常，JS Beautifier 将所有 JS 对象声明扩展为多行，每一行都有一个键值对。然而，这对于许多情况来说过于冗长（例如，很容易放在一行中的短对象）。

在此处找到其他详细信息： https ://github.com/einars/js-beautify/pull/55

enhancement

资料来源

mrchief

👍22

最有用的评论

对于像我这样来这里寻找使其工作的方法的人：它可以工作并且可以使用 .jsbeautifyrc 中的选项启用

   "brace_style": "collapse-preserve-inline"

alepez 于 2016-06-03

👍51 🎉14 ❤10 😄2

所有109条评论

+1 ...至少一个属性对象可以保留在单行上，因此c1[key] = { $exists: true };不会更改为

                c1[key] = {
                    $exists: true
                };

zaggino 于 2013-08-15

👍6

mokkabonna 于 2013-08-16

受欢迎的要求。：微笑：

旧的拉取请求是在我们换行之前完成的。换行应该更容易。

我们确实检测到我们何时在对象声明中，所以这还不错，但我们检测到它较晚（参见 #200），因此它可能涉及一些回溯以修复扩展对象。

bitwiseman 于 2013-09-11

我完全赞成，但我有一个问题。如果一个对象字面量只有一个属性，而该属性本身就是一个只有一个属性的对象字面量呢？这可以重复几次。在下面的示例中，我实际上更喜欢将代码格式化为一行。其他人可能不同意，但我认为这是需要考虑的一个重要方面。

这可能会被带到由于行长而必须包装代码的极端情况，但我的代码中确实存在以下情况：

//I prefer this...
{ foo : { bar : { baz : 42 } } }

//... over this.
{
    foo : {
        bar : {
            baz : 42
        }
    }
}

TheLudd 于 2013-09-11

👍4

@TheLudd我完全同意，并打算自己提出这个建议。也可能是深度选项。在某些级别之后，可读性是有限的。我会说你所拥有的将是最大默认值。

mokkabonna 于 2013-09-11

@mokkabonna关于深度选项的好主意。这消除了应该如何格式化这样的代码的一些歧义。如果可行...

TheLudd 于 2013-09-11

如果不是深度，可能会限制它的长度......说它在 80 个字符后换行。没有深度那么优雅，但可以快速完成。

mrchief 于 2013-09-11

我更喜欢长度的概念。如果它都可以适合窗口的宽度，那就让它吧。

felixakiragreen 于 2013-10-09

对此强烈支持。添加到 v1.5.0。

bitwiseman 于 2013-10-12

: 拍手 :: 拍手 :: 拍手 :: 拍手:

mrchief 于 2013-10-12

它还会保留这样的单行语句吗？

if(someCondition) { return something; }

mrchief 于 2013-10-12

那是规范/实施决策。似乎有可能，但将它们结合在一起可能不是一个好主意。

bitwiseman 于 2013-10-14

同意。不知道你想如何跟踪它，也许是另一个问题“在单行上保留简短的表达式/语句”？

mrchief 于 2013-10-15

当然，请注意它与此问题有关。

bitwiseman 于 2013-10-15

完毕。 https://github.com/einars/js-beautify/issues/338

mrchief 于 2013-10-15

仅供参考，这基本上是另一个版本 #114 。最古老的未决问题之一。

bitwiseman 于 2013-11-07

对此有何更新？ js-beautify 是目前最好的格式化程序之一，除了这个剩余的问题。

nisaacson 于 2013-11-08

我认为这是我在保存时不运行 js 美化器的唯一原因。

renajohn 于 2013-11-19

nickpoorman 于 2014-03-27

尽管我想在 1.5.0 中执行此操作，但我将不得不将它推到 1.5.2。

1.5.0 中已经有大量的变化，这是一个重要的特性，需要一些迭代和反馈才能干净地落地。

这无疑是 1.5.2 的最高优先级增强。

bitwiseman 于 2014-04-25

:+1: 我看到1.5.1昨天发布了。这个进了吗？如果是这样，有什么选择？

fyockm 于 2014-04-26

更新了我上面的评论。

bitwiseman 于 2014-04-26

好，谢谢。然后将在下一个版本中寻找它。

fyockm 于 2014-04-26

:+1:

gaboesquivel 于 2014-06-18

peteobrien 于 2014-07-24

嘿，我刚刚发现了 jsbeautify 并使用 Sublime Text 3 进行了设置。它太棒了！我也遇到了这个并搜索了网络，发现了这个讨论。很高兴听到它即将在 1.5.2 中发布。

距离上次关于 1.5.2 的评论已经快 5 个月了……ETA 是什么？希望 var obj = { one: property } 留在一行:) :)

ghost 于 2014-09-18

ETA 是当有人这样做的时候。那很可能是我，在下个月的某个时候。

bitwiseman 于 2014-09-18

👍1

惊人的！！！很高兴知道

2014 年 9 月 17 日晚上 11:49，Liam Newman [email protected]写道：

ETA 是当有人这样做的时候。那很可能是我，在下个月的某个时候。
—
直接回复此邮件或在 GitHub 上查看。

ghost 于 2014-09-18

我将不得不将其推送到 v1.6.0。

我为启用此功能做了重要的工作（如 #530 中所述）。但坦率地说，将其纳入此版本仍然是一项艰巨的任务。

bitwiseman 于 2014-09-29

哇...

只需阅读一些 ECMA 脚本规范并在您的 github 中打开错误
看起来很大！

幸运的是，在我的用例中，我通常只需要对每个文件美化我的 JS 一次。

我创建了第二组简单的正则表达式查找和替换自动模式
保存文件时运行，我通常不需要再次运行美化
那个文件。

如果我这样做了，出于某种原因，手动只需几秒钟
将分解的单行 ifs 或对象文字恢复到一行。（没有我
没有正则表达式查找+替换那些，大声笑）

2014 年 9 月 28 日，星期日，Liam Newman [email protected]写道：

我将不得不将其推送到 v1.6.0。
我已经完成了重要的工作（如 #530 中所述
https://github.com/beautify-web/js-beautify/pull/530）朝向启用
此功能。但坦率地说，要做到这一点仍然是一项艰巨的任务
这个版本。
—
直接回复此邮件或在 GitHub 上查看
https://github.com/beautify-web/js-beautify/issues/315#issuecomment -57132532
.

ghost 于 2014-09-29

:+1: 我对这个功能很兴奋 :)

CaitlinWeb 于 2014-12-29

+1 我希望它可以使用！

eTorAken 于 2015-03-31

+1 - 需要这个，所以我们可以在保存时美化任何地方

cloudbring 于 2015-04-09

gfaceless 于 2015-04-10

:+1:

tielur 于 2015-04-15

+1 - 因此也不能与预保存一起使用

geronime 于 2015-04-22

:+1:

此外，Escodegen 正确地做到了这一点，它的代码可能是灵感的来源：

var esprima = require("esprima"),
    esgen = require("escodegen").generate;

console.log(esgen(esprima.parse("var a = {code: 'code'}")));
console.log(esgen(esprima.parse("var a = {code: 'code', more: 'code'}")));

vkz 于 2015-04-28

@bitwiseman
对于任意数量的嵌套（例如，非常大量的嵌套），此问题可能无法解决，因为与此嵌套对应的语言是非常规的，但也许您可以出于实际目的假设一个限制（例如，最多 10 级嵌套或使用文件大小来确定合理的嵌套限制）

donasaur 于 2015-05-08

对此请求 +1。

这是一种过于冗长的拆分方式，例如这个

view.on('post', {action: 'removeTask'}, function(next) {

到多行。

ttsirkia 于 2015-06-26

有新的ETA吗？

schoening 于 2015-06-28

:+1:

openjck 于 2015-06-30

我们需要这个！！

zwarag 于 2015-07-03

:+1:

rolandnsharp 于 2015-07-12

:+1:

alexbyk 于 2015-07-16

:+1:

Tsarpf 于 2015-07-16

logstown 于 2015-07-16

虽然此功能未实现，但我在自己的运行脚本中使用了正则表达式，例如pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })
可能对某人有用。

aves84 于 2015-07-16

@aves84无法让它工作.. 但是你让我看看源代码，而不是现在就等着，所以非常感谢你：D

schoening 于 2015-07-17

@schoening也许我很困惑写道，应该在“美化”之后添加该行，而不是代替。现在我试图改变这个特定的脚本：

var pretty = beautify[fileType](code, config);
if (fileType == 'js') pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) {
            return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s
        });

它工作正常。

aves84 于 2015-07-17

@aves84 ，不，我确实理解，这是有道理的。我在 Linux Mint 上，正在浏览此文件夹/更改此文件：
/home/username/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/cli.js

更改此功能：

function makePretty( code, config, outfile, callback ) {
  try {
    var fileType = getOutputType( outfile, config.type );
    var pretty = beautify[ fileType ]( code, config );
    if ( fileType == 'js' ) pretty = pretty.replace( /{([^{}]*?)}/g, function ( s, p ) {
      return ( s.length < 100 && !/;/.test( p ) ) ? s.replace( /\n\s*/g, ' ' ) : s
    } );

    callback( null, pretty, outfile, config );
  } catch ( ex ) {
    callback( ex );
  }

}

然后，当我尝试这样的事情时，仍然会拆分对象：

var foo = {
  bar: "Hello world!"
};

对不起所有提问的伙伴。

schoening 于 2015-07-17

@schoening很可能该扩展不使用 cli.js 并用它自己的文件替换它require('js-beautify') 。在括号中，我对 ~/.config/Brackets/extensions/user/hirse.beautify/main.js 进行了更改
或者您可以尝试编辑https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369例如。

aves84 于 2015-07-17

我认为 sublime 使用 python 版本。

mokkabonna 于 2015-07-20

@mokkabonna - 这取决于。一些 sublime 插件包装 node.js 调用，其他直接使用 python。

bitwiseman 于 2015-07-20

:+1: 加一加一

MetaMemoryT 于 2015-08-09

+1。现在有这样的选择吗？

FrankFang 于 2015-08-11

:+1: 期待，谢谢。

Jacq 于 2015-08-19

:+1:

@FrankFang它被推回了尚未登陆的 1.6.0
@aves84您的技巧有时会破坏/折叠函数/for-of-loops/if 语句

for (var data of columnData) { ctx.drawImage(data.img, data.options.x, data.options.y) }

img.onerror = function() { reject() }

if (index >= rows.length) { return }

danihodovic 于 2015-08-28

@dani-h 好吧，这种方法远非理想，它依赖于短对象和代码块定义中的分号：如果没有分号且字符数少于 100，则删除换行符。它甚至会导致使用 javascript 的自动分号插入的代码出错。

aves84 于 2015-08-28

:+1:

zepedrorocha 于 2015-09-05

:+1: 期待。

FrankFang 于 2015-09-06

+1 ...我很想看到它很快就会出现。

这是我们目前无法使用此插件的唯一原因。

sylvesterworks 于 2015-10-02

michaelgmcd 于 2015-10-26

pkerschbaum 于 2015-10-31

对此+1，阻止我使用它。即使是禁用此功能的选项也会有所帮助！

AdriVanHoudt 于 2015-11-03

+1 +1 +1

auser 于 2015-11-05

cwhenderson20 于 2015-11-16

+1 并感谢您为此付出的所有辛勤工作！

glennr 于 2015-11-27

+1 现在，由于这个问题，美化实际上使我的代码变成了一个可怕的丑陋混乱。在某些情况下，这是一个非常严重的错误。特别是因为我使用 js-beautify 作为 psedo-linter（如果缩进不正确，我在某处错过了一个括号。）我的肌肉记忆将我漂亮的单元测试变成了修复所有对象文字的 10 分钟任务。

ghost 于 2015-12-11

js-beautify -pX <filename> | perl -0777 -i -pe 's/\{\s*([^{}]{30,180}?)\s*\}/\{ $1 \}/mg'

这行代码将折叠展开的东西，长度在 30 到 180 个字符之间，没有嵌入块。可能它对某些人有用。

seavan 于 2015-12-28

+1 并感谢您为此付出的所有辛勤工作！

catataw 于 2016-01-05

+1。三行而不是一行太多了。

verjik 于 2016-01-08

我希望这可以做到。 :+1:

这是 js-beautify 唯一让我不高兴的行为。 :sweat_smile:

vekat 于 2016-01-20

@vekat - 如您所见，您并不孤单。：微笑：

bitwiseman 于 2016-01-20

@nels-o - 完全不同的事情，对不起。 {{和}}等模板大括号的解析方式与 javascript 大括号完全不同。除此之外，当内联对象时，它们看起来像{ a: { b: {} } } } 。

bitwiseman 于 2016-01-22

（WRT 模板位，例如 {{}} 和 {{!}} ）是吗？如果它们在脚本标签中，则它们似乎已格式化。例如这个：

运行美化器后变成这个。

啊 :) 谢谢@bitwiseman

nels-o 于 2016-01-22

也许我应该说的是，_如果_他们要被处理，他们_将_完全分开处理。 :smile: 仍然，对不起。

bitwiseman 于 2016-01-23

+1。对ETA有任何想法吗？这让我很伤心:(

AinTunez 于 2016-01-25

+1。也会喜欢这个功能！不幸的是，我实际上没有时间以某种方式提供帮助:(

sarneeh 于 2016-01-26

+1，我们都还在耐心等待。这将是一个很棒的补充

naelkhann 于 2016-01-26

👍1

我所做的更改并不真正理解“短”对象 - 它只是试图保留输入提供的没有换行符的对象。一旦发生换行，对象就会翻转为“折叠”格式。所以，这仍然是一个不完美的解决方案，而是一个改进。

bitwiseman 于 2016-01-26

如果这如我所理解的那样有效，我认为这已经是对当前情况的巨大改善。在大多数情况下，这就足够了。

ttsirkia 于 2016-01-26

taosx 于 2016-01-27

+1 希望尽快完成

nerdpad 于 2016-02-07

@NerdPad - 完成了。

bitwiseman 于 2016-02-08

我们可以将它与括号一起使用吗？ o_O

AinTunez 于 2016-02-08

@C-Weinstein - 也许你可以用输入和所需输出的例子打开一个新问题？

bitwiseman 于 2016-02-11

对于像我这样来这里寻找使其工作的方法的人：它可以工作并且可以使用 .jsbeautifyrc 中的选项启用

   "brace_style": "collapse-preserve-inline"

alepez 于 2016-06-03

👍51 🎉14 ❤10 😄2

不幸的是，这不起作用:(但感谢您的尝试。

ghost 于 2016-08-11

@Ceyaje - 怎么没用？哪里没用？你的输入和输出是什么？

bitwiseman 于 2016-08-12

输入是

var q = { x: "a", b: "c" }

它“美化”了

var q = {
    x: "a",
    b: "c"
}

ghost 于 2016-08-12

👍2

@Ceyaje您需要将选项“brace-style”设置为“collapse-preserve-inline”

aves84 于 2016-08-12

👍4 ❤1

@aves84 - 谢谢！在#995 中继续讨论。

bitwiseman 于 2016-08-12

@aves84我做到了。我说它仍在发生，所以我打开了 #995 但我使用的是括号并且不知道它是不同的代码

ghost 于 2016-08-12

@Kutsan - 请打开一个新问题。

bitwiseman 于 2016-10-31

我在 atom 中找不到带有 html 文件的 expand-preserve-inline 选项。我在 html 文件和 js 文件中都编写了 javascript。

sandangel 于 2016-12-15

在要使用的设置（折叠、展开等）之后放置“preserve-inline”

"brace_style": "折叠，保留内联"

jonscottclark 于 2017-01-10

👍7 ❤3

https://i.gyazo.com/2831254cc47d08c879c7d36a7f1a30d0.png

发生上述情况，但是我的大括号样式是内联折叠保留。我阅读了完整的主题，我不相信我做错了什么。已经重启了Atom，以防万一，什么都没有。

ghost 于 2017-04-15

👍3

这事有进一步更新吗？ collapse-preserve-inline 仍然将箭头函数扩展为多行。

grandslammer 于 2017-05-20

@grandslammer - 请查看包含“箭头”一词的未解决问题。如果您没有看到涵盖您所讨论内容的问题，请打开一个新问题。

bitwiseman 于 2017-05-22

对不起：原始主题是“在单行 #315 上保留或内联“短对象”的选项？
这个讨论已经偏离了很多方向，请任何人指出最新版本的 js-beautify 的正确设置以实现请求的格式？谢谢

ainthek 于 2017-08-09

@ainthek这是"brace_style": "collapse,preserve-inline"

timhuff 于 2017-08-23

👍5

vs code 最新版本中的设置如何解决这个问题？

rajeshwarpatlolla 于 2018-01-05

👍1

在 vs code 1.20.1 中，我无法让样式 "brace_style": "expand,preserve-inline" 工作。

输入：

常量
 {
 对话
 } = 要求（“电子”）。远程；

输出（选择此区域并单击 F1 ---> 美化选择后）：NO CHANGE :(

预期输出： const {dialog} = require("electron").remote;

PS---->美化整个文件后得到扭曲的输入。没有人以那种扭曲的方式编写代码：P

souravsaraf 于 2018-03-07

对于 vscode，在用户设置中添加以下内容对我有用：
"beautify.config": { "brace_style": "collapse,preserve-inline" }

谢谢你们的支持。

vipingoel 于 2018-06-15

👍30 🎉5 ❤4 👀1 🚀1

@sulkhanp - 请提交描述行为的问题。

bitwiseman 于 2018-06-26

@vipingoel的解决方案有效！
为什么此选项仅适用于 vscode 用户首选项，而不适用于我的.jsbeautifyrc文件？

iplus26 于 2018-09-03

"brace_style": "expand,preserve-inline" 不起作用。

期望行为：

  let $w = $(window),  w = $w.width(),  h = $w.height();
  constructor()
  {
    this.setupData(); this.setupMenus(); this.setupUser(); this.setupUI();
  }

当前行为：

    let $w = $(window),
      w = $w.width(),
      h = $w.height();

  constructor()
  {
    this.setupData();
    this.setupMenus();
    this.setupUser();
    this.setupUI();
  }

SiJinmin 于 2018-09-15

@SiJinmin这些不是短对象，因此与此问题无关。

ttsirkia 于 2018-09-15

@vipingoel它有效。我真的很开心。谢谢！！！

Mizumaki 于 2018-12-12

此页面是否有帮助？

0 / 5 - 0 等级

Js-beautify: 在单行上保留或内联“短对象”的选项

最有用的评论

所有109条评论

相关问题