deeply nested object literals

[johann-sonntagbauer]

Currently deeply nested object literals will be formatted in a collapsed form.

This behavior is nice for simple object literals, but for deeply nested ones it would be nice to have the nested properties indented. Maybe a complexity level (like for Arrow expressions) would be nice here.

source

var simple = {
name:'a'
}

var deeplyNested = {
    name:'f',
    nested: {
    	nested: {
    		nested: {
    			nested: {
    				nested: {
    					nested: {
    						nested: {
    							name: 'a'
    						}
    					}
    				}
    			}
    		}
    	}
    }
};

formatted

var simple = {name: 'a'};

var test = {
  name: 'f',
  nested: {
    nested: {nested: {nested: {nested: {nested: {nested: {name: 'a'}}}}}}
  }
};

https://vjeux.github.io/prettier-browser/#%7B%22content%22%3A%22%5Cnvar%20simple%20%3D%20%7B%5Cnname%3A'a'%5Cn%7D%5Cn%5Cnvar%20test%20%3D%20%7B%5Cn%20%20%20%20name%3A'f'%2C%5Cn%20%20%20%20nested%3A%20%7B%5Cn%20%20%20%20%5Ctnested%3A%20%7B%5Cn%20%20%20%20%5Ct%5Ctnested%3A%20%7B%5Cn%20%20%20%20%5Ct%5Ct%5Ctnested%3A%20%7B%5Cn%20%20%20%20%5Ct%5Ct%5Ct%5Ctnested%3A%20%7B%5Cn%20%20%20%20%5Ct%5Ct%5Ct%5Ct%5Ctnested%3A%20%7B%5Cn%20%20%20%20%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctnested%3A%20%7B%5Cn%20%20%20%20%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctname%3A%20'a'%5Cn%20%20%20%20%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%20%20%20%20%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%20%20%20%20%5Ct%5Ct%5Ct%5Ct%7D%5Cn%20%20%20%20%5Ct%5Ct%5Ct%7D%5Cn%20%20%20%20%5Ct%5Ct%7D%5Cn%20%20%20%20%5Ct%7D%5Cn%20%20%20%20%7D%5Cn%7D%3B%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22useFlowParser%22%3Afalse%2C%22singleQuote%22%3Atrue%2C%22trailingComma%22%3Afalse%2C%22bracketSpacing%22%3Afalse%7D%7D

[vjeux]

Do you have a real world example where the display is not optimal?

[johann-sonntagbauer]

@vjeux sure
This example is used in combination with jss to generate styles. It would be great to have a consistent strategy to be applied to format the whole object literal.
It is kinda hard to follow the structure when some objects are printed inline and some with newlines in between. It gets even worse, when the object literal is realy long.

Another nifty side effect is that folding doesn't work for inline printed lines (in atom for example). That is a minor issue, but I use it often within style definitions to get an overview of the structure.

Overall this issue is quite minor and mainly based on personal taste. THX to all the contributors of this project. Impressive progress in the last weeks.

https://jlongster.github.io/prettier/#%7B%22content%22%3A%22const%20style%20%3D%20%7B%5Cn%20%20button%3A%20%7B%5Cn%20%20%20%20'%26%24warn'%3A%20%7B%5Cn%20%20%20%20%20%20color%3A%20'red'%2C%5Cn%20%20%20%20%20%20'%26%3Ahover'%3A%20%7B%5Cn%20%20%20%20%20%20%20%20color%3A%20'white'%2C%5Cn%20%20%20%20%20%20%20%20background%3A%20'red'%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20'%26%3Afocus'%3A%20%7B%5Cn%20%20%20%20%5Ctbackground%3A%20'blue'%2C%5Cn%20%20%20%20%20%20%5Ctcolor%3A%20'black'%2C%5Cn%20%20%20%20%20%20%20%20border%3A%20'2px%20solid%20rgba(255%2C0%2C0%2C1)'%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%20%20%7D%2C%5Cn%20%20warn%3A%20%7B%5Cn%20%20%7D%5Cn%7D%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Atrue%2C%22trailingComma%22%3Afalse%2C%22bracketSpacing%22%3Afalse%2C%22doc%22%3Afalse%7D%7D

[vjeux]

Thanks this is very helpful. On a similar vein, React Native StyleSheet.create() generates similar output which isn't the way people are used to format it. #475 is an idea on how to fix the problem, but unclear if it is a good heuristic.

[lydell]

As another real-world example, here's an excerpt from a brunch-config.js (for brunch) file in one of my projects after running prettier on it:

    uglify: { compress: { drop_console: true, global_defs: { DEBUG: false } } },
    autoReload: { enabled: false }
  },
  overrides: { autoreload: { plugins: { autoReload: { enabled: true } } } }

[vjeux]

Another idea: automatically expand all the objects at the top level. This may be weird and feel inconsistent but would solve the problem of RN StyleSheet.create and the brunch config.

[vjeux]

#74 is also talking about the same issue, let's condensate them into one. Closing this one.