Option to preserve or inline "short objects" on a single line

[mrchief]

Typically the JS Beautifier expands all JS object declarations into multiple lines, each line having a key value pair. However, this is overly verbose for many situations (e.g. short objects which could easily fit on a single line).

Additional details found here: #55

[zaggino]

+1 ... at least one propert object could stay on single line so c1[key] = { $exists: true }; would not change to

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

[mokkabonna]

+1

[bitwiseman]

Popular request. 😄

The old pull request of for this was done before we had line wrapping. Having the line wrap should make it easier.

We do detect when we are inside an object declaration, so that's not bad, but we detect it late (see #200), so it may involve some back tracking to fix up an expanded object.

[TheLudd]

I am all for this but I have a question. What if an object literal has exactly one property which in itself is an object literal with exactly one property? This could be repeated several times. In the example I have below I would actually prefer the code to be formatted on one line. Others may disagree but I think it is an important aspect to consider in this.

This could be taken to extremes where the code must be wrapped due to line length but I do have cases in my code where:

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

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

[mokkabonna]

@TheLudd I totally agree and was going to suggest this myself. Possibly a depth option as well. There is a limit to how readable that is after some levels deep. I would say what you have there would be the max default.

[TheLudd]

@mokkabonna Good idea about the depth option. That eliminates some ambiguity of how code like this should be formatted. If it is doable...

[mrchief]

If not depth, maybe limit it by length... say it wraps after 80 chars. Not as elegant as depth but whatever can be doable quickly.

[felixakiragreen]

+1

I prefer the idea of length. If it can all fit in the width of the window, let it.

[bitwiseman]

Strong support for this. Added to v1.5.0.

[mrchief]

👏👏👏👏

[mrchief]

Is it also gonna preserve single line statements like this?

if(someCondition) { return something; }

[bitwiseman]

That is as spec/implementation decision. It seems possible, but might not be a good idea to join them together.

[mrchief]

Agreed. Not sure how you want to track it though, maybe another issue "Preserve short expressions/statements on single line"?

[bitwiseman]

Sure, and note that it is related to this issue.

[mrchief]

Done. #338

[bitwiseman]

FYI, This is basically another version #114 . One of the oldest open issues.

[nisaacson]

Any updates on this? js-beautify is one of the best formatters out there except for this remaining issue.

[renajohn]

I think this is the single reason I'm not running js beautifier on save.

[nickpoorman]

+1

[bitwiseman]

As much as I want to do this in 1.5.0, I'm going to have to punt it to 1.5.2.

There are a a large number of changes already in 1.5.0, and this is a significant feature that is going to take some iterating and feedback to land cleanly.

It is certainly the highest priority enhancement for 1.5.2.

[fyockm]

👍 I see 1.5.1 was released yesterday. Did this make it in? If so, what's the option?

[bitwiseman]

Updated my comment above.

[fyockm]

Ok thanks. Will look for it in the next release then.

[gaboesquivel]

👍

[peteobrien]

+1

[nerdpad]

+1 hope this is done soon

[bitwiseman]

@nerdpad - it is done.

[AinTunez]

Can we use it with Brackets? o_O

[bitwiseman]

@C-Weinstein - Perhaps you could open a new issue with example of input and desired output?

[alepez]

For people like me coming here looking for a way to make it work: it works and can be enabled with the options in .jsbeautifyrc

   "brace_style": "collapse-preserve-inline"

[ghost]

Unfortunately, that didn't work :( But thanks for trying.

[bitwiseman]

@Ceyaje - How didn't work? Where didn't it work? What were your inputs and outputs?

[ghost]

Input was

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

It "beautifies" to

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

[aves84]

@Ceyaje you need set option "brace-style" to "collapse-preserve-inline"

[bitwiseman]

@aves84 - thanks! Continuing discussion in #995.

[ghost]

@aves84 I did that. I was saying it was still happening, so I opened #995 but I'm using Brackets and wasn't aware that it was different code

[bitwiseman]

@kutsan - Please open a new issue.

[sandangel]

I could not find expand-preserve-inline option with html file in atom. I write javascript in both html file and js file.

[jonscottclark]

Place "preserve-inline" after the setting you want to use (collapse, expand, etc.)

"brace_style": "collapse,preserve-inline"

[ghost]

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

The above happens, however my brace style is collapse-preserve-inline. I read the full thread, I don't believe I'm doing anything incorrectly. Already restarted Atom, just in case, nothing.

[grandslammer]

Any update on this? collapse-preserve-inline still expands the arrow function onto multiple lines.

[bitwiseman]

@grandslammer - Please take a look at open issues that include the word "arrow". If you don't see an issue that covers what you're talking about, please open a new issue.

[ainthek]

I'm sorry: Original topic is "Option to preserve or inline "short objects" on a single line #315?
this discussion has drifted many way, can PLEASE ANYONE point the correct settings for latest version of js-beautify to achieve requested formatting ? Thanx

[timhuff]

@ainthek it's "brace_style": "collapse,preserve-inline"

[rajeshwarpatlolla]

How about the settings in vs code latest version to fix this issue?

[ghost]

In vs code 1.20.1 , i cannot get the style "brace_style": "expand,preserve-inline", to work.

Input :

const
	{
		dialog
	} = require("electron").remote;

Output (After selecting this area and clicking F1 ---> Beautify Selection) : NO CHANGE :(

Expected Output : const {dialog} = require("electron").remote;

P.S ----> the distorted input was obtained after Beautifying the whole file. Nobody writes code in that distorted way :P

[vipingoel]

For vscode, adding below in user settings worked for me:
"beautify.config": { "brace_style": "collapse,preserve-inline" }

Thank you for the support guys.

[bitwiseman]

@sulkhanp - Please file an issue describing the behavior.

[iplus26]

@vipingoel 's solution works!
Why is this option only works in vscode user preference, not in my .jsbeautifyrc file?

[SiJinmin]

"brace_style": "expand,preserve-inline" doesn't work.

expect behavior:

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

current behavior:

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

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

[ttsirkia]

@SiJinmin these are not short objects and therefore not related to this issue.

[Mizumaki]

@vipingoel It works. I'm really happy. Thanks!!!