Js-beautify: Difference between brace styles? (collapse vs end-expand)

Created on 19 Dec 2014 · 3Comments · Source: beautify-web/js-beautify

Sorry if this has been answered before or is explained somewhere, but I couldn't find it.

First let me start with an example. In my code I have a lot of objects that hold settings for functions. With the option brace_style: collapse, I would expect:

function someFunc(settings) {
  return settings.set;
}
someFunc( { set: 'string' } );

But maybe if it's large enough (like 3 or more properties? maybe that could be a setting?):

someFunc( {
  set: 'string', 
  set2: 'string2',
  set3: 'string3'
} );

Except that it instead does this:

someFunc( { 
  set: 'string' 
} );

When there are a lot of these objects being used, it can be quite hard to read. I'd like "collapse" to mean that smaller curly-braced code (statements, objects, anonymous functions, etc) would all stay on one line.

I also don't see a difference between "collapse" and "end-expand". As far as I can tell, they do the same thing.

Source

CaitlinWeb

👍5

Most helpful comment

The first part sounds like #338.

The "collapse" option just controls whether the opening curly brace is on the same line as the stuff that comes _before_ it, or on its own line--it doesn't deal with the stuff that comes afterwards (inside the curly braces).

The difference between "collapse" and "end-expand" is how the ending curly brace is treated in certain cases. For example:

"collapse" would do this, putting the closing brace for the if on the same line as the else keyword:

if (someCondition) {
  doSomething();
} else {
  doSomethingElse();
}

Whereas "end-expand" would do this, putting the closing brace for the if on its own line:

if (someCondition) {
  doSomething();
}                     // closing curly brace is put on its own line
else {
  doSomethingElse();
}

hth

c32hedge on 29 Dec 2014

👍4

All 3 comments

The first part sounds like #338.

The difference between "collapse" and "end-expand" is how the ending curly brace is treated in certain cases. For example:

"collapse" would do this, putting the closing brace for the if on the same line as the else keyword:

if (someCondition) {
  doSomething();
} else {
  doSomethingElse();
}

Whereas "end-expand" would do this, putting the closing brace for the if on its own line:

if (someCondition) {
  doSomething();
}                     // closing curly brace is put on its own line
else {
  doSomethingElse();
}

hth

c32hedge on 29 Dec 2014

👍4

Thanks @c32hedge, it seems this is a fairly popular request that's in the process of being filled! #315

Great explanation, I get it now. I was thinking it had to do with what was in the braces, not what was happening around it. I wonder if the documentation could be updated to include a short explanation of this?

CaitlinWeb on 29 Dec 2014

Searching js-beautify brace-style explain on Google will lead to this issue. Those who really want to learn this without reading the code can get what they want.