Edit

Object Curly Spacing

Config Key: object_curly_spacing

Description: Inserts a space before/after brackets for object literals, destructuring assignments, and import/export specifiers

Available since version: 0.7.0 (Current: )

Type: boolean

Default: true

Support

Edit Beautifiers

Languages: JSX, JavaScript, TypeScript

Beautifiers: Prettier, ESLint

Comparison Table

Language	Prettier	ESLint
JSX	✅	✅
JavaScript	✅	✅
TypeScript	✅	❌

Examples

Select Language:

JSX * JavaScript * TypeScript *

Invisible characters are shown with the following symbols:

Carriage Return = ␍; Line Feed = ␊; Tab = ⇥; Whitespace = ·.

Edit JSX Example

🚧 Original Code

//·simple·object·literals␊
var·obj·=·{·foo:·"bar"·};␊
␊
//·nested·object·literals␊
var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{·x,·y·}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{·foo·}·from·"bar";␊
export·{·foo·};

🔧 true

Using Prettier beautifier:

//·simple·object·literals␊
var·obj·=·{·foo:·"bar"·};␊
␊
//·nested·object·literals␊
var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{·x,·y·}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{·foo·}·from·"bar";␊
export·{·foo·};␊

How to configure

A .unibeautify.json file would look like the following:

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "object_curly_spacing": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -8,5 +8,5 @@
 var·{·x,·y·}·=·y;␊
 ␊
 //·import/export·declarations·(EcmaScript·6)␊
 import·{·foo·}·from·"bar";␊
-export·{·foo·};
\ No newline at end of file
+export·{·foo·};␊

🔧 false

Using Prettier beautifier:

//·simple·object·literals␊
var·obj·=·{foo:·"bar"};␊
␊
//·nested·object·literals␊
var·obj·=·{foo:·{zoo:·"bar"}};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{x,·y}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{foo}·from·"bar";␊
export·{foo};␊

How to configure

A .unibeautify.json file would look like the following:

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "object_curly_spacing": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,12 +1,12 @@
 //·simple·object·literals␊
-var·obj·=·{·foo:·"bar"·};␊
+var·obj·=·{foo:·"bar"};␊
 ␊
 //·nested·object·literals␊
-var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
+var·obj·=·{foo:·{zoo:·"bar"}};␊
 ␊
 //·destructuring·assignment·(EcmaScript·6)␊
-var·{·x,·y·}·=·y;␊
+var·{x,·y}·=·y;␊
 ␊
\ No newline at end of file
 //·import/export·declarations·(EcmaScript·6)␊
-import·{·foo·}·from·"bar";␊
-export·{·foo·};
+import·{foo}·from·"bar";␊
+export·{foo};␊

Edit JavaScript Example

🚧 Original Code

//·simple·object·literals␊
var·obj·=·{·foo:·"bar"·};␊
␊
//·nested·object·literals␊
var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{·x,·y·}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{·foo·}·from·"bar";␊
export·{·foo·};

🔧 true

Using Prettier beautifier:

//·simple·object·literals␊
var·obj·=·{·foo:·"bar"·};␊
␊
//·nested·object·literals␊
var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{·x,·y·}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{·foo·}·from·"bar";␊
export·{·foo·};␊

How to configure

A .unibeautify.json file would look like the following:

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "object_curly_spacing": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -8,5 +8,5 @@
 var·{·x,·y·}·=·y;␊
 ␊
 //·import/export·declarations·(EcmaScript·6)␊
 import·{·foo·}·from·"bar";␊
-export·{·foo·};
\ No newline at end of file
+export·{·foo·};␊

🔧 false

Using Prettier beautifier:

//·simple·object·literals␊
var·obj·=·{foo:·"bar"};␊
␊
//·nested·object·literals␊
var·obj·=·{foo:·{zoo:·"bar"}};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{x,·y}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{foo}·from·"bar";␊
export·{foo};␊

How to configure

A .unibeautify.json file would look like the following:

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "object_curly_spacing": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,12 +1,12 @@
 //·simple·object·literals␊
-var·obj·=·{·foo:·"bar"·};␊
+var·obj·=·{foo:·"bar"};␊
 ␊
 //·nested·object·literals␊
-var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
+var·obj·=·{foo:·{zoo:·"bar"}};␊
 ␊
 //·destructuring·assignment·(EcmaScript·6)␊
-var·{·x,·y·}·=·y;␊
+var·{x,·y}·=·y;␊
 ␊
\ No newline at end of file
 //·import/export·declarations·(EcmaScript·6)␊
-import·{·foo·}·from·"bar";␊
-export·{·foo·};
+import·{foo}·from·"bar";␊
+export·{foo};␊

Edit TypeScript Example

🚧 Original Code

//·simple·object·literals␊
var·obj·=·{·foo:·"bar"·};␊
␊
//·nested·object·literals␊
var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{·x,·y·}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{·foo·}·from·"bar";␊
export·{·foo·};

🔧 true

Using Prettier beautifier:

//·simple·object·literals␊
var·obj·=·{·foo:·"bar"·};␊
␊
//·nested·object·literals␊
var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{·x,·y·}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{·foo·}·from·"bar";␊
export·{·foo·};␊

How to configure

A .unibeautify.json file would look like the following:

{
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "object_curly_spacing": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -8,5 +8,5 @@
 var·{·x,·y·}·=·y;␊
 ␊
 //·import/export·declarations·(EcmaScript·6)␊
 import·{·foo·}·from·"bar";␊
-export·{·foo·};
\ No newline at end of file
+export·{·foo·};␊

🔧 false

Using Prettier beautifier:

//·simple·object·literals␊
var·obj·=·{foo:·"bar"};␊
␊
//·nested·object·literals␊
var·obj·=·{foo:·{zoo:·"bar"}};␊
␊
//·destructuring·assignment·(EcmaScript·6)␊
var·{x,·y}·=·y;␊
␊
//·import/export·declarations·(EcmaScript·6)␊
import·{foo}·from·"bar";␊
export·{foo};␊

How to configure

A .unibeautify.json file would look like the following:

{
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "object_curly_spacing": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,12 +1,12 @@
 //·simple·object·literals␊
-var·obj·=·{·foo:·"bar"·};␊
+var·obj·=·{foo:·"bar"};␊
 ␊
 //·nested·object·literals␊
-var·obj·=·{·foo:·{·zoo:·"bar"·}·};␊
+var·obj·=·{foo:·{zoo:·"bar"}};␊
 ␊
 //·destructuring·assignment·(EcmaScript·6)␊
-var·{·x,·y·}·=·y;␊
+var·{x,·y}·=·y;␊
 ␊
\ No newline at end of file
 //·import/export·declarations·(EcmaScript·6)␊
-import·{·foo·}·from·"bar";␊
-export·{·foo·};
+import·{foo}·from·"bar";␊
+export·{foo};␊