Edit

Indent Size

Config Key: indent_size

Description: Indentation size/length

Available since version: 0.7.0 (Current: )

Type: integer

Default: 2

Support

Edit Beautifiers

Languages: C#, CSS, ColdFusion, EJS, GraphQL, HTML, HTML+ERB, Handlebars, JSON, JSON5, JSX, Java, JavaScript, Less, Liquid, Mustache, Python, Riot, SCSS, SQL, SVG, Sass, Spacebars, SugarSS, Swig, Titanium Style Sheets, Twig, TypeScript, Visualforce, Vue, XML, XTemplate

Beautifiers: Prettier, JS-Beautify, Pretty Diff, ESLint, sqlformat, YAPF, stylelint

Comparison Table

Language	Prettier	JS-Beautify	Pretty Diff	ESLint	sqlformat	YAPF	stylelint
C#	❌	❌	✅	❌	❌	❌	❌
CSS	✅	✅	✅	❌	❌	❌	✅
ColdFusion	❌	❌	✅	❌	❌	❌	❌
EJS	❌	✅	✅	❌	❌	❌	❌
GraphQL	✅	❌	❌	❌	❌	❌	❌
HTML	❌	✅	✅	❌	❌	❌	❌
HTML+ERB	❌	❌	✅	❌	❌	❌	❌
Handlebars	❌	✅	✅	❌	❌	❌	❌
JSON	✅	✅	✅	❌	❌	❌	❌
JSON5	✅	✅	✅	❌	❌	❌	❌
JSX	✅	✅	✅	✅	❌	❌	❌
Java	❌	❌	✅	❌	❌	❌	❌
JavaScript	✅	✅	✅	✅	❌	❌	❌
Less	✅	❌	✅	❌	❌	❌	✅
Liquid	❌	✅	❌	❌	❌	❌	❌
Mustache	❌	✅	❌	❌	❌	❌	❌
Python	❌	❌	❌	❌	❌	✅	❌
Riot	❌	❌	✅	❌	❌	❌	❌
SCSS	✅	❌	✅	❌	❌	❌	✅
SQL	❌	❌	❌	❌	✅	❌	❌
SVG	❌	❌	✅	❌	❌	❌	❌
Sass	❌	❌	❌	❌	❌	❌	✅
Spacebars	❌	❌	✅	❌	❌	❌	❌
SugarSS	❌	❌	❌	❌	❌	❌	✅
Swig	❌	❌	✅	❌	❌	❌	❌
Titanium Style Sheets	❌	❌	✅	❌	❌	❌	❌
Twig	❌	❌	✅	❌	❌	❌	❌
TypeScript	✅	❌	✅	❌	❌	❌	❌
Visualforce	❌	❌	✅	❌	❌	❌	❌
Vue	✅	❌	❌	❌	❌	❌	❌
XML	❌	✅	✅	❌	❌	❌	❌
XTemplate	❌	❌	✅	❌	❌	❌	❌

Examples

Select Language:

C# * CSS * ColdFusion * EJS * GraphQL * HTML * HTML+ERB * Handlebars * JSON * JSON5 * JSX * Java * JavaScript * Less * Liquid * Mustache * Python * Riot * SCSS * SQL * SVG * Sass * Spacebars * SugarSS * Swig Titanium Style Sheets * Twig * TypeScript * Visualforce * Vue * XML * XTemplate *

Invisible characters are shown with the following symbols:

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

Edit C# Example

🚧 Original Code

using·System;␊
␊
class·Program␊
{␊
static·void·Main()␊
{␊
Console.WriteLine("Hello,·world!");␊
}␊
}

🔧 0

Using Pretty Diff beautifier:

using·System;␊
␊
class·Program·{␊
··static·void·Main()·{␊
····Console.WriteLine("Hello,·world!");␊
··}␊
}

How to configure

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

{
  "C#": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,9 +1,7 @@
 using·System;␊
 ␊
-class·Program␊
-{␊
-static·void·Main()␊
-{␊
-Console.WriteLine("Hello,·world!");␊
-}␊
+class·Program·{␊
+··static·void·Main()·{␊
+····Console.WriteLine("Hello,·world!");␊
+··}␊
 }
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

using·System;␊
␊
class·Program·{␊
·static·void·Main()·{␊
··Console.WriteLine("Hello,·world!");␊
·}␊
}

How to configure

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

{
  "C#": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,9 +1,7 @@
 using·System;␊
 ␊
-class·Program␊
-{␊
-static·void·Main()␊
-{␊
-Console.WriteLine("Hello,·world!");␊
-}␊
+class·Program·{␊
+·static·void·Main()·{␊
+··Console.WriteLine("Hello,·world!");␊
+·}␊
 }
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

using·System;␊
␊
class·Program·{␊
··static·void·Main()·{␊
····Console.WriteLine("Hello,·world!");␊
··}␊
}

How to configure

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

{
  "C#": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,9 +1,7 @@
 using·System;␊
 ␊
-class·Program␊
-{␊
-static·void·Main()␊
-{␊
-Console.WriteLine("Hello,·world!");␊
-}␊
+class·Program·{␊
+··static·void·Main()·{␊
+····Console.WriteLine("Hello,·world!");␊
+··}␊
 }
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

using·System;␊
␊
class·Program·{␊
···static·void·Main()·{␊
······Console.WriteLine("Hello,·world!");␊
···}␊
}

How to configure

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

{
  "C#": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,9 +1,7 @@
 using·System;␊
 ␊
-class·Program␊
-{␊
-static·void·Main()␊
-{␊
-Console.WriteLine("Hello,·world!");␊
-}␊
+class·Program·{␊
+···static·void·Main()·{␊
+······Console.WriteLine("Hello,·world!");␊
+···}␊
 }
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

using·System;␊
␊
class·Program·{␊
····static·void·Main()·{␊
········Console.WriteLine("Hello,·world!");␊
····}␊
}

How to configure

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

{
  "C#": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,9 +1,7 @@
 using·System;␊
 ␊
-class·Program␊
-{␊
-static·void·Main()␊
-{␊
-Console.WriteLine("Hello,·world!");␊
-}␊
+class·Program·{␊
+····static·void·Main()·{␊
+········Console.WriteLine("Hello,·world!");␊
+····}␊
 }
\ No newline at end of file

Edit CSS Example

🚧 Original Code

.class1·{␊
·color:·blue;␊
···background-color:·red;␊
}␊

🔧 0

Using Prettier beautifier:

.class1·{␊
color:·blue;␊
background-color:·red;␊
}␊

How to configure

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

{
  "CSS": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,4 +1,4 @@
 .class1·{␊
-·color:·blue;␊
-···background-color:·red;␊
+color:·blue;␊
+background-color:·red;␊
 }␊

🔧 1

Using Prettier beautifier:

.class1·{␊
·color:·blue;␊
·background-color:·red;␊
}␊

How to configure

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

{
  "CSS": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,4 +1,4 @@
 .class1·{␊
 ·color:·blue;␊
-···background-color:·red;␊
+·background-color:·red;␊
 }␊

🔧 2

Using Prettier beautifier:

.class1·{␊
··color:·blue;␊
··background-color:·red;␊
}␊

How to configure

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

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,4 +1,4 @@
 .class1·{␊
-·color:·blue;␊
-···background-color:·red;␊
+··color:·blue;␊
+··background-color:·red;␊
 }␊

🔧 3

Using Prettier beautifier:

.class1·{␊
···color:·blue;␊
···background-color:·red;␊
}␊

How to configure

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

{
  "CSS": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,4 +1,4 @@
 .class1·{␊
-·color:·blue;␊
+···color:·blue;␊
 ···background-color:·red;␊
 }␊

🔧 4

Using Prettier beautifier:

.class1·{␊
····color:·blue;␊
····background-color:·red;␊
}␊

How to configure

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

{
  "CSS": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,4 +1,4 @@
 .class1·{␊
-·color:·blue;␊
-···background-color:·red;␊
+····color:·blue;␊
+····background-color:·red;␊
 }␊

Edit ColdFusion Example

🚧 Original Code

//·Any·variable·set·here·can·be·used·by·all·pages␊
//·Start·session·management.·Used·to·track·session·variables␊
␊
<cfset·this.sessionManagement·=·true>␊
␊
//·Start·client·management.·Used·to·track·client·variables␊
␊
<cfset·this.clientmanagement·=·true>␊
<cfset·this.name·=·"Name·of·your·application">␊
␊
␊
<!---·On·Request·Start·Function--->␊
//·is·called·when·user·request·any·web·page.␊
␊
<cffunction·name="onRequestStart"·output="true"·returntype="void">␊
<cfset·request.datasource·=·"companyk1"·>␊
<cfset·request.companyname·=·"Company·K1·-·HQ">␊
␊
/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
<cfinclude·template="companyk1_header.cfm">␊
␊
</cffunction>␊
␊
/*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
␊
<cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
<cfinclude·template="companyk1_footer.cfm">␊
</cffunction>␊

🔧 0

Using Pretty Diff beautifier:

//·Any·variable·set·here·can·be·used·by·all·pages␊
//·Start·session·management.·Used·to·track·session·variables␊
␊
<·cfset·this.sessionManagement·=·true·>␊
␊
//·Start·client·management.·Used·to·track·client·variables␊
␊
<cfset·this.clientmanagement=true>␊
<cfset·this.name="Name·of·your·application">␊
␊
<!---·On·Request·Start·Function--->␊
//·is·called·when·user·request·any·web·page.␊
␊
<cffunction·name="onRequestStart"·output="true"·returntype="void">␊
··<cfset·request.datasource="companyk1">␊
··<cfset·request.companyname="Company·K1·-·HQ">␊
␊
··/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
··<cfinclude·template="companyk1_header.cfm">␊
␊
</cffunction>␊
␊
/*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
␊
<cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
··<cfinclude·template="companyk1_footer.cfm">␊
</cffunction>

How to configure

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

{
  "ColdFusion": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,28 +1,27 @@
 //·Any·variable·set·here·can·be·used·by·all·pages␊
 //·Start·session·management.·Used·to·track·session·variables␊
 ␊
-<cfset·this.sessionManagement·=·true>␊
+<·cfset·this.sessionManagement·=·true·>␊
 ␊
 //·Start·client·management.·Used·to·track·client·variables␊
 ␊
-<cfset·this.clientmanagement·=·true>␊
-<cfset·this.name·=·"Name·of·your·application">␊
+<cfset·this.clientmanagement=true>␊
+<cfset·this.name="Name·of·your·application">␊
 ␊
-␊
 <!---·On·Request·Start·Function--->␊
 //·is·called·when·user·request·any·web·page.␊
 ␊
 <cffunction·name="onRequestStart"·output="true"·returntype="void">␊
-<cfset·request.datasource·=·"companyk1"·>␊
-<cfset·request.companyname·=·"Company·K1·-·HQ">␊
+··<cfset·request.datasource="companyk1">␊
+··<cfset·request.companyname="Company·K1·-·HQ">␊
 ␊
-/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
-<cfinclude·template="companyk1_header.cfm">␊
+··/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
+··<cfinclude·template="companyk1_header.cfm">␊
 ␊
 </cffunction>␊
 ␊
 /*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
 ␊
 <cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
-<cfinclude·template="companyk1_footer.cfm">␊
-</cffunction>␊
+··<cfinclude·template="companyk1_footer.cfm">␊
+</cffunction>
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

//·Any·variable·set·here·can·be·used·by·all·pages␊
//·Start·session·management.·Used·to·track·session·variables␊
␊
<·cfset·this.sessionManagement·=·true·>␊
␊
//·Start·client·management.·Used·to·track·client·variables␊
␊
<cfset·this.clientmanagement=true>␊
<cfset·this.name="Name·of·your·application">␊
␊
<!---·On·Request·Start·Function--->␊
//·is·called·when·user·request·any·web·page.␊
␊
<cffunction·name="onRequestStart"·output="true"·returntype="void">␊
·<cfset·request.datasource="companyk1">␊
·<cfset·request.companyname="Company·K1·-·HQ">␊
␊
·/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
·<cfinclude·template="companyk1_header.cfm">␊
␊
</cffunction>␊
␊
/*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
␊
<cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
·<cfinclude·template="companyk1_footer.cfm">␊
</cffunction>

How to configure

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

{
  "ColdFusion": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,28 +1,27 @@
 //·Any·variable·set·here·can·be·used·by·all·pages␊
 //·Start·session·management.·Used·to·track·session·variables␊
 ␊
-<cfset·this.sessionManagement·=·true>␊
+<·cfset·this.sessionManagement·=·true·>␊
 ␊
 //·Start·client·management.·Used·to·track·client·variables␊
 ␊
-<cfset·this.clientmanagement·=·true>␊
-<cfset·this.name·=·"Name·of·your·application">␊
+<cfset·this.clientmanagement=true>␊
+<cfset·this.name="Name·of·your·application">␊
 ␊
-␊
 <!---·On·Request·Start·Function--->␊
 //·is·called·when·user·request·any·web·page.␊
 ␊
 <cffunction·name="onRequestStart"·output="true"·returntype="void">␊
-<cfset·request.datasource·=·"companyk1"·>␊
-<cfset·request.companyname·=·"Company·K1·-·HQ">␊
+·<cfset·request.datasource="companyk1">␊
+·<cfset·request.companyname="Company·K1·-·HQ">␊
 ␊
-/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
-<cfinclude·template="companyk1_header.cfm">␊
+·/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
+·<cfinclude·template="companyk1_header.cfm">␊
 ␊
 </cffunction>␊
 ␊
 /*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
 ␊
 <cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
-<cfinclude·template="companyk1_footer.cfm">␊
-</cffunction>␊
+·<cfinclude·template="companyk1_footer.cfm">␊
+</cffunction>
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

//·Any·variable·set·here·can·be·used·by·all·pages␊
//·Start·session·management.·Used·to·track·session·variables␊
␊
<·cfset·this.sessionManagement·=·true·>␊
␊
//·Start·client·management.·Used·to·track·client·variables␊
␊
<cfset·this.clientmanagement=true>␊
<cfset·this.name="Name·of·your·application">␊
␊
<!---·On·Request·Start·Function--->␊
//·is·called·when·user·request·any·web·page.␊
␊
<cffunction·name="onRequestStart"·output="true"·returntype="void">␊
··<cfset·request.datasource="companyk1">␊
··<cfset·request.companyname="Company·K1·-·HQ">␊
␊
··/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
··<cfinclude·template="companyk1_header.cfm">␊
␊
</cffunction>␊
␊
/*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
␊
<cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
··<cfinclude·template="companyk1_footer.cfm">␊
</cffunction>

How to configure

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

{
  "ColdFusion": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,28 +1,27 @@
 //·Any·variable·set·here·can·be·used·by·all·pages␊
 //·Start·session·management.·Used·to·track·session·variables␊
 ␊
-<cfset·this.sessionManagement·=·true>␊
+<·cfset·this.sessionManagement·=·true·>␊
 ␊
 //·Start·client·management.·Used·to·track·client·variables␊
 ␊
-<cfset·this.clientmanagement·=·true>␊
-<cfset·this.name·=·"Name·of·your·application">␊
+<cfset·this.clientmanagement=true>␊
+<cfset·this.name="Name·of·your·application">␊
 ␊
-␊
 <!---·On·Request·Start·Function--->␊
 //·is·called·when·user·request·any·web·page.␊
 ␊
 <cffunction·name="onRequestStart"·output="true"·returntype="void">␊
-<cfset·request.datasource·=·"companyk1"·>␊
-<cfset·request.companyname·=·"Company·K1·-·HQ">␊
+··<cfset·request.datasource="companyk1">␊
+··<cfset·request.companyname="Company·K1·-·HQ">␊
 ␊
-/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
-<cfinclude·template="companyk1_header.cfm">␊
+··/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
+··<cfinclude·template="companyk1_header.cfm">␊
 ␊
 </cffunction>␊
 ␊
 /*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
 ␊
 <cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
-<cfinclude·template="companyk1_footer.cfm">␊
-</cffunction>␊
+··<cfinclude·template="companyk1_footer.cfm">␊
+</cffunction>
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

//·Any·variable·set·here·can·be·used·by·all·pages␊
//·Start·session·management.·Used·to·track·session·variables␊
␊
<·cfset·this.sessionManagement·=·true·>␊
␊
//·Start·client·management.·Used·to·track·client·variables␊
␊
<cfset·this.clientmanagement=true>␊
<cfset·this.name="Name·of·your·application">␊
␊
<!---·On·Request·Start·Function--->␊
//·is·called·when·user·request·any·web·page.␊
␊
<cffunction·name="onRequestStart"·output="true"·returntype="void">␊
···<cfset·request.datasource="companyk1">␊
···<cfset·request.companyname="Company·K1·-·HQ">␊
␊
···/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
···<cfinclude·template="companyk1_header.cfm">␊
␊
</cffunction>␊
␊
/*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
␊
<cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
···<cfinclude·template="companyk1_footer.cfm">␊
</cffunction>

How to configure

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

{
  "ColdFusion": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,28 +1,27 @@
 //·Any·variable·set·here·can·be·used·by·all·pages␊
 //·Start·session·management.·Used·to·track·session·variables␊
 ␊
-<cfset·this.sessionManagement·=·true>␊
+<·cfset·this.sessionManagement·=·true·>␊
 ␊
 //·Start·client·management.·Used·to·track·client·variables␊
 ␊
-<cfset·this.clientmanagement·=·true>␊
-<cfset·this.name·=·"Name·of·your·application">␊
+<cfset·this.clientmanagement=true>␊
+<cfset·this.name="Name·of·your·application">␊
 ␊
-␊
 <!---·On·Request·Start·Function--->␊
 //·is·called·when·user·request·any·web·page.␊
 ␊
 <cffunction·name="onRequestStart"·output="true"·returntype="void">␊
-<cfset·request.datasource·=·"companyk1"·>␊
-<cfset·request.companyname·=·"Company·K1·-·HQ">␊
+···<cfset·request.datasource="companyk1">␊
+···<cfset·request.companyname="Company·K1·-·HQ">␊
 ␊
-/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
-<cfinclude·template="companyk1_header.cfm">␊
+···/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
+···<cfinclude·template="companyk1_header.cfm">␊
 ␊
 </cffunction>␊
 ␊
 /*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
 ␊
 <cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
-<cfinclude·template="companyk1_footer.cfm">␊
-</cffunction>␊
+···<cfinclude·template="companyk1_footer.cfm">␊
+</cffunction>
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

//·Any·variable·set·here·can·be·used·by·all·pages␊
//·Start·session·management.·Used·to·track·session·variables␊
␊
<·cfset·this.sessionManagement·=·true·>␊
␊
//·Start·client·management.·Used·to·track·client·variables␊
␊
<cfset·this.clientmanagement=true>␊
<cfset·this.name="Name·of·your·application">␊
␊
<!---·On·Request·Start·Function--->␊
//·is·called·when·user·request·any·web·page.␊
␊
<cffunction·name="onRequestStart"·output="true"·returntype="void">␊
····<cfset·request.datasource="companyk1">␊
····<cfset·request.companyname="Company·K1·-·HQ">␊
␊
····/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
····<cfinclude·template="companyk1_header.cfm">␊
␊
</cffunction>␊
␊
/*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
␊
<cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
····<cfinclude·template="companyk1_footer.cfm">␊
</cffunction>

How to configure

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

{
  "ColdFusion": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,28 +1,27 @@
 //·Any·variable·set·here·can·be·used·by·all·pages␊
 //·Start·session·management.·Used·to·track·session·variables␊
 ␊
-<cfset·this.sessionManagement·=·true>␊
+<·cfset·this.sessionManagement·=·true·>␊
 ␊
 //·Start·client·management.·Used·to·track·client·variables␊
 ␊
-<cfset·this.clientmanagement·=·true>␊
-<cfset·this.name·=·"Name·of·your·application">␊
+<cfset·this.clientmanagement=true>␊
+<cfset·this.name="Name·of·your·application">␊
 ␊
-␊
 <!---·On·Request·Start·Function--->␊
 //·is·called·when·user·request·any·web·page.␊
 ␊
 <cffunction·name="onRequestStart"·output="true"·returntype="void">␊
-<cfset·request.datasource·=·"companyk1"·>␊
-<cfset·request.companyname·=·"Company·K1·-·HQ">␊
+····<cfset·request.datasource="companyk1">␊
+····<cfset·request.companyname="Company·K1·-·HQ">␊
 ␊
-/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
-<cfinclude·template="companyk1_header.cfm">␊
+····/*·call·your·header·file·everytime·when·user·access·webpage.·So·you·do·not·have·to·include·in·every·page*/␊
+····<cfinclude·template="companyk1_header.cfm">␊
 ␊
 </cffunction>␊
 ␊
 /*On·request·end·function·is·used·to·called·end·the·end·of·webpage·access·*/␊
 ␊
 <cffunction·name="onRequestEnd"·returntype="void"·output="true">␊
-<cfinclude·template="companyk1_footer.cfm">␊
-</cffunction>␊
+····<cfinclude·template="companyk1_footer.cfm">␊
+</cffunction>
\ No newline at end of file

Edit EJS Example

🚧 Original Code

<%·if·(user)·{·%>␊
<h2><%=·user.name·%></h2>␊
<%·}·%>␊

🔧 0

Using JS-Beautify beautifier:

<%·if·(user)·{·%>␊
<h2><%=·user.name·%></h2>␊
<%·}·%>

How to configure

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

{
  "EJS": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,3 +1,3 @@
 <%·if·(user)·{·%>␊
 <h2><%=·user.name·%></h2>␊
-<%·}·%>␊
+<%·}·%>
\ No newline at end of file

🔧 1

Using JS-Beautify beautifier:

<%·if·(user)·{·%>␊
<h2><%=·user.name·%></h2>␊
<%·}·%>

How to configure

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

{
  "EJS": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,3 +1,3 @@
 <%·if·(user)·{·%>␊
 <h2><%=·user.name·%></h2>␊
-<%·}·%>␊
+<%·}·%>
\ No newline at end of file

🔧 2

Using JS-Beautify beautifier:

<%·if·(user)·{·%>␊
<h2><%=·user.name·%></h2>␊
<%·}·%>

How to configure

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

{
  "EJS": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,3 +1,3 @@
 <%·if·(user)·{·%>␊
 <h2><%=·user.name·%></h2>␊
-<%·}·%>␊
+<%·}·%>
\ No newline at end of file

🔧 3

Using JS-Beautify beautifier:

<%·if·(user)·{·%>␊
<h2><%=·user.name·%></h2>␊
<%·}·%>

How to configure

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

{
  "EJS": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,3 +1,3 @@
 <%·if·(user)·{·%>␊
 <h2><%=·user.name·%></h2>␊
-<%·}·%>␊
+<%·}·%>
\ No newline at end of file

🔧 4

Using JS-Beautify beautifier:

<%·if·(user)·{·%>␊
<h2><%=·user.name·%></h2>␊
<%·}·%>

How to configure

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

{
  "EJS": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,3 +1,3 @@
 <%·if·(user)·{·%>␊
 <h2><%=·user.name·%></h2>␊
-<%·}·%>␊
+<%·}·%>
\ No newline at end of file

Edit GraphQL Example

🚧 Original Code

{␊
··me·{␊
name␊
·······}␊
}␊

🔧 0

Using Prettier beautifier:

{␊
me·{␊
name␊
}␊
}␊

How to configure

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

{
  "GraphQL": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,5 +1,5 @@
 {␊
-··me·{␊
+me·{␊
 name␊
-·······}␊
 }␊
+}␊

🔧 1

Using Prettier beautifier:

{␊
·me·{␊
··name␊
·}␊
}␊

How to configure

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

{
  "GraphQL": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,5 +1,5 @@
 {␊
-··me·{␊
-name␊
-·······}␊
+·me·{␊
+··name␊
+·}␊
 }␊

🔧 2

Using Prettier beautifier:

{␊
··me·{␊
····name␊
··}␊
}␊

How to configure

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

{
  "GraphQL": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,5 +1,5 @@
 {␊
 ··me·{␊
-name␊
-·······}␊
+····name␊
+··}␊
 }␊

🔧 3

Using Prettier beautifier:

{␊
···me·{␊
······name␊
···}␊
}␊

How to configure

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

{
  "GraphQL": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,5 +1,5 @@
 {␊
-··me·{␊
-name␊
-·······}␊
+···me·{␊
+······name␊
+···}␊
 }␊

🔧 4

Using Prettier beautifier:

{␊
····me·{␊
········name␊
····}␊
}␊

How to configure

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

{
  "GraphQL": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,5 +1,5 @@
 {␊
-··me·{␊
-name␊
-·······}␊
+····me·{␊
+········name␊
+····}␊
 }␊

Edit HTML Example

🚧 Original Code

<div>␊
<span>Hello</span>␊
<span>World</span>␊
</div>␊

🔧 0

Using JS-Beautify beautifier:

<div>␊
<span>Hello</span>␊
<span>World</span>␊
</div>

How to configure

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

{
  "HTML": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,4 +1,4 @@
 <div>␊
 <span>Hello</span>␊
 <span>World</span>␊
-</div>␊
+</div>
\ No newline at end of file

🔧 1

Using JS-Beautify beautifier:

<div>␊
·<span>Hello</span>␊
·<span>World</span>␊
</div>

How to configure

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

{
  "HTML": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,4 +1,4 @@
 <div>␊
-<span>Hello</span>␊
-<span>World</span>␊
-</div>␊
+·<span>Hello</span>␊
+·<span>World</span>␊
+</div>
\ No newline at end of file

🔧 2

Using JS-Beautify beautifier:

<div>␊
··<span>Hello</span>␊
··<span>World</span>␊
</div>

How to configure

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

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,4 +1,4 @@
 <div>␊
-<span>Hello</span>␊
-<span>World</span>␊
-</div>␊
+··<span>Hello</span>␊
+··<span>World</span>␊
+</div>
\ No newline at end of file

🔧 3

Using JS-Beautify beautifier:

<div>␊
···<span>Hello</span>␊
···<span>World</span>␊
</div>

How to configure

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

{
  "HTML": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,4 +1,4 @@
 <div>␊
-<span>Hello</span>␊
-<span>World</span>␊
-</div>␊
+···<span>Hello</span>␊
+···<span>World</span>␊
+</div>
\ No newline at end of file

🔧 4

Using JS-Beautify beautifier:

<div>␊
····<span>Hello</span>␊
····<span>World</span>␊
</div>

How to configure

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

{
  "HTML": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,4 +1,4 @@
 <div>␊
-<span>Hello</span>␊
-<span>World</span>␊
-</div>␊
+····<span>Hello</span>␊
+····<span>World</span>␊
+</div>
\ No newline at end of file

Edit HTML+ERB Example

🚧 Original Code

<%·content_for·:page_title·do·%>␊
Ruby·on·Rails·Guides␊
<%·end·%>␊
␊
<%·content_for·:header_section·do·%>␊
<%=·render·'welcome'·%>␊
<%·end·%>␊
␊
<%·content_for·:index_section·do·%>␊
<div·id="subCol">␊
<dl>␊
<dt></dt>␊
<%·unless·@edge·-%>␊
<dd·class="kindle">Rails·Guides·are·also·available·for·<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
<%·end·-%>␊
<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
</dl>␊
</div>␊
<%·end·%>␊
␊
<%·documents_by_section.each·do·|section|·%>␊
<h3><%=·section['name']·%></h3>␊
<dl>␊
<%·section['documents'].each·do·|document|·%>␊
<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
<p><%=·document['description']·%></p>␊
<%·end·%>␊
<%·end·%>␊
</dl>␊
<%·end·%>

🔧 0

Using Pretty Diff beautifier:

<%·content_for·:page_title·do·%>␊
··Ruby·on·Rails·Guides␊
<%·end·%>␊
␊
<%·content_for·:header_section·do·%>␊
··<%=·render·'welcome'·%>␊
<%·end·%>␊
␊
<%·content_for·:index_section·do·%>␊
··<div·id="subCol">␊
····<dl>␊
······<dt></dt>␊
······<%·unless·@edge·-%>␊
········<dd·class="kindle">Rails·Guides·are·also·available·for␊
··········<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
······<%·end·-%>␊
······<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
····</dl>␊
··</div>␊
<%·end·%>␊
␊
<%·documents_by_section.each·do·|section|·%>␊
··<h3><%=·section['name']·%></h3>␊
··<dl>␊
····<%·section['documents'].each·do·|document|·%>␊
······<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
······<p><%=·document['description']·%></p>␊
····<%·end·%>␊
··<%·end·%>␊
</dl>␊
<%·end·%>

How to configure

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

{
  "HTML+ERB": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,30 +1,31 @@
 <%·content_for·:page_title·do·%>␊
-Ruby·on·Rails·Guides␊
+··Ruby·on·Rails·Guides␊
 <%·end·%>␊
 ␊
 <%·content_for·:header_section·do·%>␊
-<%=·render·'welcome'·%>␊
+··<%=·render·'welcome'·%>␊
 <%·end·%>␊
 ␊
 <%·content_for·:index_section·do·%>␊
-<div·id="subCol">␊
-<dl>␊
-<dt></dt>␊
-<%·unless·@edge·-%>␊
-<dd·class="kindle">Rails·Guides·are·also·available·for·<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
-<%·end·-%>␊
-<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
-</dl>␊
-</div>␊
+··<div·id="subCol">␊
+····<dl>␊
+······<dt></dt>␊
+······<%·unless·@edge·-%>␊
+········<dd·class="kindle">Rails·Guides·are·also·available·for␊
+··········<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
+······<%·end·-%>␊
+······<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
+····</dl>␊
+··</div>␊
 <%·end·%>␊
 ␊
 <%·documents_by_section.each·do·|section|·%>␊
-<h3><%=·section['name']·%></h3>␊
-<dl>␊
-<%·section['documents'].each·do·|document|·%>␊
-<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
-<p><%=·document['description']·%></p>␊
-<%·end·%>␊
-<%·end·%>␊
+··<h3><%=·section['name']·%></h3>␊
+··<dl>␊
+····<%·section['documents'].each·do·|document|·%>␊
+······<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
+······<p><%=·document['description']·%></p>␊
+····<%·end·%>␊
+··<%·end·%>␊
 </dl>␊
 <%·end·%>
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

<%·content_for·:page_title·do·%>␊
·Ruby·on·Rails·Guides␊
<%·end·%>␊
␊
<%·content_for·:header_section·do·%>␊
·<%=·render·'welcome'·%>␊
<%·end·%>␊
␊
<%·content_for·:index_section·do·%>␊
·<div·id="subCol">␊
··<dl>␊
···<dt></dt>␊
···<%·unless·@edge·-%>␊
····<dd·class="kindle">Rails·Guides·are·also·available·for␊
·····<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
···<%·end·-%>␊
···<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
··</dl>␊
·</div>␊
<%·end·%>␊
␊
<%·documents_by_section.each·do·|section|·%>␊
·<h3><%=·section['name']·%></h3>␊
·<dl>␊
··<%·section['documents'].each·do·|document|·%>␊
···<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
···<p><%=·document['description']·%></p>␊
··<%·end·%>␊
·<%·end·%>␊
</dl>␊
<%·end·%>

How to configure

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

{
  "HTML+ERB": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,30 +1,31 @@
 <%·content_for·:page_title·do·%>␊
-Ruby·on·Rails·Guides␊
+·Ruby·on·Rails·Guides␊
 <%·end·%>␊
 ␊
 <%·content_for·:header_section·do·%>␊
-<%=·render·'welcome'·%>␊
+·<%=·render·'welcome'·%>␊
 <%·end·%>␊
 ␊
 <%·content_for·:index_section·do·%>␊
-<div·id="subCol">␊
-<dl>␊
-<dt></dt>␊
-<%·unless·@edge·-%>␊
-<dd·class="kindle">Rails·Guides·are·also·available·for·<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
-<%·end·-%>␊
-<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
-</dl>␊
-</div>␊
+·<div·id="subCol">␊
+··<dl>␊
+···<dt></dt>␊
+···<%·unless·@edge·-%>␊
+····<dd·class="kindle">Rails·Guides·are·also·available·for␊
+·····<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
+···<%·end·-%>␊
+···<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
+··</dl>␊
+·</div>␊
 <%·end·%>␊
 ␊
 <%·documents_by_section.each·do·|section|·%>␊
-<h3><%=·section['name']·%></h3>␊
-<dl>␊
-<%·section['documents'].each·do·|document|·%>␊
-<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
-<p><%=·document['description']·%></p>␊
-<%·end·%>␊
-<%·end·%>␊
+·<h3><%=·section['name']·%></h3>␊
+·<dl>␊
+··<%·section['documents'].each·do·|document|·%>␊
+···<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
+···<p><%=·document['description']·%></p>␊
+··<%·end·%>␊
+·<%·end·%>␊
 </dl>␊
 <%·end·%>
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

<%·content_for·:page_title·do·%>␊
··Ruby·on·Rails·Guides␊
<%·end·%>␊
␊
<%·content_for·:header_section·do·%>␊
··<%=·render·'welcome'·%>␊
<%·end·%>␊
␊
<%·content_for·:index_section·do·%>␊
··<div·id="subCol">␊
····<dl>␊
······<dt></dt>␊
······<%·unless·@edge·-%>␊
········<dd·class="kindle">Rails·Guides·are·also·available·for␊
··········<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
······<%·end·-%>␊
······<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
····</dl>␊
··</div>␊
<%·end·%>␊
␊
<%·documents_by_section.each·do·|section|·%>␊
··<h3><%=·section['name']·%></h3>␊
··<dl>␊
····<%·section['documents'].each·do·|document|·%>␊
······<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
······<p><%=·document['description']·%></p>␊
····<%·end·%>␊
··<%·end·%>␊
</dl>␊
<%·end·%>

How to configure

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

{
  "HTML+ERB": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,30 +1,31 @@
 <%·content_for·:page_title·do·%>␊
-Ruby·on·Rails·Guides␊
+··Ruby·on·Rails·Guides␊
 <%·end·%>␊
 ␊
 <%·content_for·:header_section·do·%>␊
-<%=·render·'welcome'·%>␊
+··<%=·render·'welcome'·%>␊
 <%·end·%>␊
 ␊
 <%·content_for·:index_section·do·%>␊
-<div·id="subCol">␊
-<dl>␊
-<dt></dt>␊
-<%·unless·@edge·-%>␊
-<dd·class="kindle">Rails·Guides·are·also·available·for·<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
-<%·end·-%>␊
-<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
-</dl>␊
-</div>␊
+··<div·id="subCol">␊
+····<dl>␊
+······<dt></dt>␊
+······<%·unless·@edge·-%>␊
+········<dd·class="kindle">Rails·Guides·are·also·available·for␊
+··········<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
+······<%·end·-%>␊
+······<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
+····</dl>␊
+··</div>␊
 <%·end·%>␊
 ␊
 <%·documents_by_section.each·do·|section|·%>␊
-<h3><%=·section['name']·%></h3>␊
-<dl>␊
-<%·section['documents'].each·do·|document|·%>␊
-<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
-<p><%=·document['description']·%></p>␊
-<%·end·%>␊
-<%·end·%>␊
+··<h3><%=·section['name']·%></h3>␊
+··<dl>␊
+····<%·section['documents'].each·do·|document|·%>␊
+······<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
+······<p><%=·document['description']·%></p>␊
+····<%·end·%>␊
+··<%·end·%>␊
 </dl>␊
 <%·end·%>
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

<%·content_for·:page_title·do·%>␊
···Ruby·on·Rails·Guides␊
<%·end·%>␊
␊
<%·content_for·:header_section·do·%>␊
···<%=·render·'welcome'·%>␊
<%·end·%>␊
␊
<%·content_for·:index_section·do·%>␊
···<div·id="subCol">␊
······<dl>␊
·········<dt></dt>␊
·········<%·unless·@edge·-%>␊
············<dd·class="kindle">Rails·Guides·are·also·available·for␊
···············<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
·········<%·end·-%>␊
·········<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
······</dl>␊
···</div>␊
<%·end·%>␊
␊
<%·documents_by_section.each·do·|section|·%>␊
···<h3><%=·section['name']·%></h3>␊
···<dl>␊
······<%·section['documents'].each·do·|document|·%>␊
·········<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
·········<p><%=·document['description']·%></p>␊
······<%·end·%>␊
···<%·end·%>␊
</dl>␊
<%·end·%>

How to configure

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

{
  "HTML+ERB": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,30 +1,31 @@
 <%·content_for·:page_title·do·%>␊
-Ruby·on·Rails·Guides␊
+···Ruby·on·Rails·Guides␊
 <%·end·%>␊
 ␊
 <%·content_for·:header_section·do·%>␊
-<%=·render·'welcome'·%>␊
+···<%=·render·'welcome'·%>␊
 <%·end·%>␊
 ␊
 <%·content_for·:index_section·do·%>␊
-<div·id="subCol">␊
-<dl>␊
-<dt></dt>␊
-<%·unless·@edge·-%>␊
-<dd·class="kindle">Rails·Guides·are·also·available·for·<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
-<%·end·-%>␊
-<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
-</dl>␊
-</div>␊
+···<div·id="subCol">␊
+······<dl>␊
+·········<dt></dt>␊
+·········<%·unless·@edge·-%>␊
+············<dd·class="kindle">Rails·Guides·are·also·available·for␊
+···············<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
+·········<%·end·-%>␊
+·········<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
+······</dl>␊
+···</div>␊
 <%·end·%>␊
 ␊
 <%·documents_by_section.each·do·|section|·%>␊
-<h3><%=·section['name']·%></h3>␊
-<dl>␊
-<%·section['documents'].each·do·|document|·%>␊
-<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
-<p><%=·document['description']·%></p>␊
-<%·end·%>␊
-<%·end·%>␊
+···<h3><%=·section['name']·%></h3>␊
+···<dl>␊
+······<%·section['documents'].each·do·|document|·%>␊
+·········<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
+·········<p><%=·document['description']·%></p>␊
+······<%·end·%>␊
+···<%·end·%>␊
 </dl>␊
 <%·end·%>
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

<%·content_for·:page_title·do·%>␊
····Ruby·on·Rails·Guides␊
<%·end·%>␊
␊
<%·content_for·:header_section·do·%>␊
····<%=·render·'welcome'·%>␊
<%·end·%>␊
␊
<%·content_for·:index_section·do·%>␊
····<div·id="subCol">␊
········<dl>␊
············<dt></dt>␊
············<%·unless·@edge·-%>␊
················<dd·class="kindle">Rails·Guides·are·also·available·for␊
····················<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
············<%·end·-%>␊
············<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
········</dl>␊
····</div>␊
<%·end·%>␊
␊
<%·documents_by_section.each·do·|section|·%>␊
····<h3><%=·section['name']·%></h3>␊
····<dl>␊
········<%·section['documents'].each·do·|document|·%>␊
············<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
············<p><%=·document['description']·%></p>␊
········<%·end·%>␊
····<%·end·%>␊
</dl>␊
<%·end·%>

How to configure

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

{
  "HTML+ERB": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,30 +1,31 @@
 <%·content_for·:page_title·do·%>␊
-Ruby·on·Rails·Guides␊
+····Ruby·on·Rails·Guides␊
 <%·end·%>␊
 ␊
 <%·content_for·:header_section·do·%>␊
-<%=·render·'welcome'·%>␊
+····<%=·render·'welcome'·%>␊
 <%·end·%>␊
 ␊
 <%·content_for·:index_section·do·%>␊
-<div·id="subCol">␊
-<dl>␊
-<dt></dt>␊
-<%·unless·@edge·-%>␊
-<dd·class="kindle">Rails·Guides·are·also·available·for·<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
-<%·end·-%>␊
-<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
-</dl>␊
-</div>␊
+····<div·id="subCol">␊
+········<dl>␊
+············<dt></dt>␊
+············<%·unless·@edge·-%>␊
+················<dd·class="kindle">Rails·Guides·are·also·available·for␊
+····················<%=·link_to·'Kindle',·@mobi·%>.</dd>␊
+············<%·end·-%>␊
+············<dd·class="work-in-progress">Guides·marked·with·this·icon·are·currently·being·worked·on·and·will·not·be·available·in·the·Guides·Index·menu.·While·still·useful,·they·may·contain·incomplete·information·and·even·errors.·You·can·help·by·reviewing·them·and·posting·your·comments·and·corrections.</dd>␊
+········</dl>␊
+····</div>␊
 <%·end·%>␊
 ␊
 <%·documents_by_section.each·do·|section|·%>␊
-<h3><%=·section['name']·%></h3>␊
-<dl>␊
-<%·section['documents'].each·do·|document|·%>␊
-<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
-<p><%=·document['description']·%></p>␊
-<%·end·%>␊
-<%·end·%>␊
+····<h3><%=·section['name']·%></h3>␊
+····<dl>␊
+········<%·section['documents'].each·do·|document|·%>␊
+············<%=·guide(document['name'],·document['url'],·work_in_progress:·document['work_in_progress'])·do·%>␊
+············<p><%=·document['description']·%></p>␊
+········<%·end·%>␊
+····<%·end·%>␊
 </dl>␊
 <%·end·%>
\ No newline at end of file

Edit Handlebars Example

🚧 Original Code

<div·class="entry">␊
<h1>{{title}}</h1>␊
<div·class="body">␊
{{body}}␊
</div>␊
</div>␊

🔧 0

Using JS-Beautify beautifier:

<div·class="entry">␊
<h1>{{title}}</h1>␊
<div·class="body">␊
␊
{{body}}␊
</div>␊
</div>

How to configure

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

{
  "Handlebars": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
 <h1>{{title}}</h1>␊
 <div·class="body">␊
+␊
 {{body}}␊
 </div>␊
-</div>␊
+</div>
\ No newline at end of file

🔧 1

Using JS-Beautify beautifier:

<div·class="entry">␊
·<h1>{{title}}</h1>␊
·<div·class="body">␊
␊
··{{body}}␊
·</div>␊
</div>

How to configure

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

{
  "Handlebars": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
-<h1>{{title}}</h1>␊
-<div·class="body">␊
-{{body}}␊
-</div>␊
-</div>␊
+·<h1>{{title}}</h1>␊
+·<div·class="body">␊
+␊
+··{{body}}␊
+·</div>␊
+</div>
\ No newline at end of file

🔧 2

Using JS-Beautify beautifier:

<div·class="entry">␊
··<h1>{{title}}</h1>␊
··<div·class="body">␊
␊
····{{body}}␊
··</div>␊
</div>

How to configure

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

{
  "Handlebars": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
-<h1>{{title}}</h1>␊
-<div·class="body">␊
-{{body}}␊
-</div>␊
-</div>␊
+··<h1>{{title}}</h1>␊
+··<div·class="body">␊
+␊
+····{{body}}␊
+··</div>␊
+</div>
\ No newline at end of file

🔧 3

Using JS-Beautify beautifier:

<div·class="entry">␊
···<h1>{{title}}</h1>␊
···<div·class="body">␊
␊
······{{body}}␊
···</div>␊
</div>

How to configure

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

{
  "Handlebars": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
-<h1>{{title}}</h1>␊
-<div·class="body">␊
-{{body}}␊
-</div>␊
-</div>␊
+···<h1>{{title}}</h1>␊
+···<div·class="body">␊
+␊
+······{{body}}␊
+···</div>␊
+</div>
\ No newline at end of file

🔧 4

Using JS-Beautify beautifier:

<div·class="entry">␊
····<h1>{{title}}</h1>␊
····<div·class="body">␊
␊
········{{body}}␊
····</div>␊
</div>

How to configure

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

{
  "Handlebars": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
-<h1>{{title}}</h1>␊
-<div·class="body">␊
-{{body}}␊
-</div>␊
-</div>␊
+····<h1>{{title}}</h1>␊
+····<div·class="body">␊
+␊
+········{{body}}␊
+····</div>␊
+</div>
\ No newline at end of file

Edit JSON Example

🚧 Original Code

{␊
····"key":·"value"␊
}

🔧 0

Using Prettier beautifier:

{␊
"key":·"value"␊
}␊

How to configure

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

{
  "JSON": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+"key":·"value"␊
+}␊

🔧 1

Using Prettier beautifier:

{␊
·"key":·"value"␊
}␊

How to configure

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

{
  "JSON": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+·"key":·"value"␊
+}␊

🔧 2

Using Prettier beautifier:

{␊
··"key":·"value"␊
}␊

How to configure

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

{
  "JSON": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+··"key":·"value"␊
+}␊

🔧 3

Using Prettier beautifier:

{␊
···"key":·"value"␊
}␊

How to configure

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

{
  "JSON": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+···"key":·"value"␊
+}␊

🔧 4

Using Prettier beautifier:

{␊
····"key":·"value"␊
}␊

How to configure

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

{
  "JSON": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,3 +1,3 @@
 {␊
 ····"key":·"value"␊
-}
\ No newline at end of file
+}␊

Edit JSON5 Example

🚧 Original Code

{␊
····"key":·"value"␊
}

🔧 0

Using Prettier beautifier:

{␊
key:·"value"␊
}␊

How to configure

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

{
  "JSON5": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+key:·"value"␊
+}␊

🔧 1

Using Prettier beautifier:

{␊
·key:·"value"␊
}␊

How to configure

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

{
  "JSON5": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+·key:·"value"␊
+}␊

🔧 2

Using Prettier beautifier:

{␊
··key:·"value"␊
}␊

How to configure

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

{
  "JSON5": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+··key:·"value"␊
+}␊

🔧 3

Using Prettier beautifier:

{␊
···key:·"value"␊
}␊

How to configure

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

{
  "JSON5": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+···key:·"value"␊
+}␊

🔧 4

Using Prettier beautifier:

{␊
····key:·"value"␊
}␊

How to configure

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

{
  "JSON5": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,3 +1,3 @@
 {␊
-····"key":·"value"␊
-}
\ No newline at end of file
+····key:·"value"␊
+}␊

Edit JSX Example

🚧 Original Code

if·(a)·{␊
······b·=·c;␊
function·foo(d)·{␊
··········e·=·f;␊
··}␊
}␊
␊
if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
······e·=·f;␊
··}␊
}␊
␊
foo.bar.baz();␊

🔧 0

Using Prettier beautifier:

if·(a)·{␊
b·=·c;␊
function·foo(d)·{␊
e·=·f;␊
}␊
}␊
␊
if·(a)·{␊
b·=·c;␊
function·foo(d)·{␊
e·=·f;␊
}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "JSX": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
+b·=·c;␊
 function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+e·=·f;␊
 }␊
+}␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+b·=·c;␊
+function·foo(d)·{␊
+e·=·f;␊
 }␊
+}␊
 ␊
 foo.bar.baz();␊

🔧 1

Using Prettier beautifier:

if·(a)·{␊
·b·=·c;␊
·function·foo(d)·{␊
··e·=·f;␊
·}␊
}␊
␊
if·(a)·{␊
·b·=·c;␊
·function·foo(d)·{␊
··e·=·f;␊
·}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "JSX": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+·b·=·c;␊
+·function·foo(d)·{␊
+··e·=·f;␊
+·}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+·b·=·c;␊
+·function·foo(d)·{␊
+··e·=·f;␊
+·}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 2

Using Prettier beautifier:

if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
····e·=·f;␊
··}␊
}␊
␊
if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
····e·=·f;␊
··}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

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

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
+··b·=·c;␊
+··function·foo(d)·{␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 if·(a)·{␊
 ··b·=·c;␊
 ··function·foo(d)·{␊
-······e·=·f;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 3

Using Prettier beautifier:

if·(a)·{␊
···b·=·c;␊
···function·foo(d)·{␊
······e·=·f;␊
···}␊
}␊
␊
if·(a)·{␊
···b·=·c;␊
···function·foo(d)·{␊
······e·=·f;␊
···}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "JSX": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+···b·=·c;␊
+···function·foo(d)·{␊
+······e·=·f;␊
+···}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
+···b·=·c;␊
+···function·foo(d)·{␊
 ······e·=·f;␊
-··}␊
+···}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 4

Using Prettier beautifier:

if·(a)·{␊
····b·=·c;␊
····function·foo(d)·{␊
········e·=·f;␊
····}␊
}␊
␊
if·(a)·{␊
····b·=·c;␊
····function·foo(d)·{␊
········e·=·f;␊
····}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "JSX": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+····b·=·c;␊
+····function·foo(d)·{␊
+········e·=·f;␊
+····}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+····b·=·c;␊
+····function·foo(d)·{␊
+········e·=·f;␊
+····}␊
 }␊
 ␊
 foo.bar.baz();␊

Edit Java Example

🚧 Original Code

public·class·HelloWorld·{␊
␊
····public·static·void·main(String[]·args)·{␊
········//·Prints·"Hello,·World"·to·the·terminal·window.␊
········System.out.println("Hello,·World");␊
····}␊
␊
}␊

🔧 0

Using Pretty Diff beautifier:

public·class·HelloWorld·{␊
␊
··public·static·void·main(String[]·args)·{␊
····//·Prints·"Hello,·World"·to·the·terminal·window.␊
····System.out.println("Hello,·World");␊
··}␊
␊
}␊

How to configure

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

{
  "Java": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,8 +1,8 @@
 public·class·HelloWorld·{␊
 ␊
-····public·static·void·main(String[]·args)·{␊
-········//·Prints·"Hello,·World"·to·the·terminal·window.␊
-········System.out.println("Hello,·World");␊
-····}␊
+··public·static·void·main(String[]·args)·{␊
+····//·Prints·"Hello,·World"·to·the·terminal·window.␊
+····System.out.println("Hello,·World");␊
+··}␊
 ␊
 }␊

🔧 1

Using Pretty Diff beautifier:

public·class·HelloWorld·{␊
␊
·public·static·void·main(String[]·args)·{␊
··//·Prints·"Hello,·World"·to·the·terminal·window.␊
··System.out.println("Hello,·World");␊
·}␊
␊
}␊

How to configure

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

{
  "Java": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,8 +1,8 @@
 public·class·HelloWorld·{␊
 ␊
-····public·static·void·main(String[]·args)·{␊
-········//·Prints·"Hello,·World"·to·the·terminal·window.␊
-········System.out.println("Hello,·World");␊
-····}␊
+·public·static·void·main(String[]·args)·{␊
+··//·Prints·"Hello,·World"·to·the·terminal·window.␊
+··System.out.println("Hello,·World");␊
+·}␊
 ␊
 }␊

🔧 2

Using Pretty Diff beautifier:

public·class·HelloWorld·{␊
␊
··public·static·void·main(String[]·args)·{␊
····//·Prints·"Hello,·World"·to·the·terminal·window.␊
····System.out.println("Hello,·World");␊
··}␊
␊
}␊

How to configure

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

{
  "Java": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,8 +1,8 @@
 public·class·HelloWorld·{␊
 ␊
-····public·static·void·main(String[]·args)·{␊
-········//·Prints·"Hello,·World"·to·the·terminal·window.␊
-········System.out.println("Hello,·World");␊
-····}␊
+··public·static·void·main(String[]·args)·{␊
+····//·Prints·"Hello,·World"·to·the·terminal·window.␊
+····System.out.println("Hello,·World");␊
+··}␊
 ␊
 }␊

🔧 3

Using Pretty Diff beautifier:

public·class·HelloWorld·{␊
␊
···public·static·void·main(String[]·args)·{␊
······//·Prints·"Hello,·World"·to·the·terminal·window.␊
······System.out.println("Hello,·World");␊
···}␊
␊
}␊

How to configure

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

{
  "Java": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,8 +1,8 @@
 public·class·HelloWorld·{␊
 ␊
-····public·static·void·main(String[]·args)·{␊
-········//·Prints·"Hello,·World"·to·the·terminal·window.␊
-········System.out.println("Hello,·World");␊
-····}␊
+···public·static·void·main(String[]·args)·{␊
+······//·Prints·"Hello,·World"·to·the·terminal·window.␊
+······System.out.println("Hello,·World");␊
+···}␊
 ␊
 }␊

🔧 4

Using Pretty Diff beautifier:

public·class·HelloWorld·{␊
␊
····public·static·void·main(String[]·args)·{␊
········//·Prints·"Hello,·World"·to·the·terminal·window.␊
········System.out.println("Hello,·World");␊
····}␊
␊
}␊

How to configure

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

{
  "Java": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified

Edit JavaScript Example

🚧 Original Code

if·(a)·{␊
······b·=·c;␊
function·foo(d)·{␊
··········e·=·f;␊
··}␊
}␊
␊
if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
······e·=·f;␊
··}␊
}␊
␊
foo.bar.baz();␊

🔧 0

Using Prettier beautifier:

if·(a)·{␊
b·=·c;␊
function·foo(d)·{␊
e·=·f;␊
}␊
}␊
␊
if·(a)·{␊
b·=·c;␊
function·foo(d)·{␊
e·=·f;␊
}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "JavaScript": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
+b·=·c;␊
 function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+e·=·f;␊
 }␊
+}␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+b·=·c;␊
+function·foo(d)·{␊
+e·=·f;␊
 }␊
+}␊
 ␊
 foo.bar.baz();␊

🔧 1

Using Prettier beautifier:

if·(a)·{␊
·b·=·c;␊
·function·foo(d)·{␊
··e·=·f;␊
·}␊
}␊
␊
if·(a)·{␊
·b·=·c;␊
·function·foo(d)·{␊
··e·=·f;␊
·}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "JavaScript": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+·b·=·c;␊
+·function·foo(d)·{␊
+··e·=·f;␊
+·}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+·b·=·c;␊
+·function·foo(d)·{␊
+··e·=·f;␊
+·}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 2

Using Prettier beautifier:

if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
····e·=·f;␊
··}␊
}␊
␊
if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
····e·=·f;␊
··}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

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

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
+··b·=·c;␊
+··function·foo(d)·{␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 if·(a)·{␊
 ··b·=·c;␊
 ··function·foo(d)·{␊
-······e·=·f;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 3

Using Prettier beautifier:

if·(a)·{␊
···b·=·c;␊
···function·foo(d)·{␊
······e·=·f;␊
···}␊
}␊
␊
if·(a)·{␊
···b·=·c;␊
···function·foo(d)·{␊
······e·=·f;␊
···}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "JavaScript": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+···b·=·c;␊
+···function·foo(d)·{␊
+······e·=·f;␊
+···}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
+···b·=·c;␊
+···function·foo(d)·{␊
 ······e·=·f;␊
-··}␊
+···}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 4

Using Prettier beautifier:

if·(a)·{␊
····b·=·c;␊
····function·foo(d)·{␊
········e·=·f;␊
····}␊
}␊
␊
if·(a)·{␊
····b·=·c;␊
····function·foo(d)·{␊
········e·=·f;␊
····}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "JavaScript": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+····b·=·c;␊
+····function·foo(d)·{␊
+········e·=·f;␊
+····}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+····b·=·c;␊
+····function·foo(d)·{␊
+········e·=·f;␊
+····}␊
 }␊
 ␊
 foo.bar.baz();␊

Edit Less Example

🚧 Original Code

@primary:··green;␊
@secondary:·blue;␊
␊
.section·{␊
··@color:·primary;␊
␊
··.element·{␊
····color:·@@color;␊
··}␊
}␊

🔧 0

Using Prettier beautifier:

@primary:·green;␊
@secondary:·blue;␊
␊
.section·{␊
@color:·primary;␊
␊
.element·{␊
color:·@@color;␊
}␊
}␊

How to configure

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

{
  "Less": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,10 +1,10 @@
-@primary:··green;␊
+@primary:·green;␊
 @secondary:·blue;␊
 ␊
 .section·{␊
-··@color:·primary;␊
+@color:·primary;␊
 ␊
-··.element·{␊
-····color:·@@color;␊
-··}␊
+.element·{␊
+color:·@@color;␊
 }␊
+}␊

🔧 1

Using Prettier beautifier:

@primary:·green;␊
@secondary:·blue;␊
␊
.section·{␊
·@color:·primary;␊
␊
·.element·{␊
··color:·@@color;␊
·}␊
}␊

How to configure

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

{
  "Less": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,10 +1,10 @@
-@primary:··green;␊
+@primary:·green;␊
 @secondary:·blue;␊
 ␊
 .section·{␊
-··@color:·primary;␊
+·@color:·primary;␊
 ␊
-··.element·{␊
-····color:·@@color;␊
-··}␊
+·.element·{␊
+··color:·@@color;␊
+·}␊
 }␊

🔧 2

Using Prettier beautifier:

@primary:·green;␊
@secondary:·blue;␊
␊
.section·{␊
··@color:·primary;␊
␊
··.element·{␊
····color:·@@color;␊
··}␊
}␊

How to configure

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

{
  "Less": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,5 +1,5 @@
-@primary:··green;␊
+@primary:·green;␊
 @secondary:·blue;␊
 ␊
 .section·{␊
 ··@color:·primary;␊

🔧 3

Using Prettier beautifier:

@primary:·green;␊
@secondary:·blue;␊
␊
.section·{␊
···@color:·primary;␊
␊
···.element·{␊
······color:·@@color;␊
···}␊
}␊

How to configure

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

{
  "Less": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,10 +1,10 @@
-@primary:··green;␊
+@primary:·green;␊
 @secondary:·blue;␊
 ␊
 .section·{␊
-··@color:·primary;␊
+···@color:·primary;␊
 ␊
-··.element·{␊
-····color:·@@color;␊
-··}␊
+···.element·{␊
+······color:·@@color;␊
+···}␊
 }␊

🔧 4

Using Prettier beautifier:

@primary:·green;␊
@secondary:·blue;␊
␊
.section·{␊
····@color:·primary;␊
␊
····.element·{␊
········color:·@@color;␊
····}␊
}␊

How to configure

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

{
  "Less": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,10 +1,10 @@
-@primary:··green;␊
+@primary:·green;␊
 @secondary:·blue;␊
 ␊
 .section·{␊
-··@color:·primary;␊
+····@color:·primary;␊
 ␊
-··.element·{␊
-····color:·@@color;␊
-··}␊
+····.element·{␊
+········color:·@@color;␊
+····}␊
 }␊

Edit Liquid Example

🚧 Original Code

<ul·id="products">␊
{%·for·product·in·products·%}␊
<li>␊
<h2>{{·product.name·}}</h2>␊
Only·{{·product.price·|·price·}}␊
␊
{{·product.description·|·prettyprint·|·paragraph·}}␊
</li>␊
{%·endfor·%}␊
</ul>␊

🔧 0

Using JS-Beautify beautifier:

<ul·id="products">␊
{%·for·product·in·products·%}␊
<li>␊
<h2>{{·product.name·}}</h2>␊
Only·{{·product.price·|·price·}}␊
␊
{{·product.description·|·prettyprint·|·paragraph·}}␊
</li>␊
{%·endfor·%}␊
</ul>

How to configure

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

{
  "Liquid": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -6,5 +6,5 @@
 ␊
 {{·product.description·|·prettyprint·|·paragraph·}}␊
 </li>␊
 {%·endfor·%}␊
-</ul>␊
+</ul>
\ No newline at end of file

🔧 1

Using JS-Beautify beautifier:

<ul·id="products">␊
·{%·for·product·in·products·%}␊
·<li>␊
··<h2>{{·product.name·}}</h2>␊
··Only·{{·product.price·|·price·}}␊
␊
··{{·product.description·|·prettyprint·|·paragraph·}}␊
·</li>␊
·{%·endfor·%}␊
</ul>

How to configure

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

{
  "Liquid": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,10 +1,10 @@
 <ul·id="products">␊
-{%·for·product·in·products·%}␊
-<li>␊
-<h2>{{·product.name·}}</h2>␊
-Only·{{·product.price·|·price·}}␊
+·{%·for·product·in·products·%}␊
+·<li>␊
+··<h2>{{·product.name·}}</h2>␊
+··Only·{{·product.price·|·price·}}␊
 ␊
-{{·product.description·|·prettyprint·|·paragraph·}}␊
-</li>␊
-{%·endfor·%}␊
-</ul>␊
+··{{·product.description·|·prettyprint·|·paragraph·}}␊
+·</li>␊
+·{%·endfor·%}␊
+</ul>
\ No newline at end of file

🔧 2

Using JS-Beautify beautifier:

<ul·id="products">␊
··{%·for·product·in·products·%}␊
··<li>␊
····<h2>{{·product.name·}}</h2>␊
····Only·{{·product.price·|·price·}}␊
␊
····{{·product.description·|·prettyprint·|·paragraph·}}␊
··</li>␊
··{%·endfor·%}␊
</ul>

How to configure

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

{
  "Liquid": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,10 +1,10 @@
 <ul·id="products">␊
-{%·for·product·in·products·%}␊
-<li>␊
-<h2>{{·product.name·}}</h2>␊
-Only·{{·product.price·|·price·}}␊
+··{%·for·product·in·products·%}␊
+··<li>␊
+····<h2>{{·product.name·}}</h2>␊
+····Only·{{·product.price·|·price·}}␊
 ␊
-{{·product.description·|·prettyprint·|·paragraph·}}␊
-</li>␊
-{%·endfor·%}␊
-</ul>␊
+····{{·product.description·|·prettyprint·|·paragraph·}}␊
+··</li>␊
+··{%·endfor·%}␊
+</ul>
\ No newline at end of file

🔧 3

Using JS-Beautify beautifier:

<ul·id="products">␊
···{%·for·product·in·products·%}␊
···<li>␊
······<h2>{{·product.name·}}</h2>␊
······Only·{{·product.price·|·price·}}␊
␊
······{{·product.description·|·prettyprint·|·paragraph·}}␊
···</li>␊
···{%·endfor·%}␊
</ul>

How to configure

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

{
  "Liquid": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,10 +1,10 @@
 <ul·id="products">␊
-{%·for·product·in·products·%}␊
-<li>␊
-<h2>{{·product.name·}}</h2>␊
-Only·{{·product.price·|·price·}}␊
+···{%·for·product·in·products·%}␊
+···<li>␊
+······<h2>{{·product.name·}}</h2>␊
+······Only·{{·product.price·|·price·}}␊
 ␊
-{{·product.description·|·prettyprint·|·paragraph·}}␊
-</li>␊
-{%·endfor·%}␊
-</ul>␊
+······{{·product.description·|·prettyprint·|·paragraph·}}␊
+···</li>␊
+···{%·endfor·%}␊
+</ul>
\ No newline at end of file

🔧 4

Using JS-Beautify beautifier:

<ul·id="products">␊
····{%·for·product·in·products·%}␊
····<li>␊
········<h2>{{·product.name·}}</h2>␊
········Only·{{·product.price·|·price·}}␊
␊
········{{·product.description·|·prettyprint·|·paragraph·}}␊
····</li>␊
····{%·endfor·%}␊
</ul>

How to configure

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

{
  "Liquid": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,10 +1,10 @@
 <ul·id="products">␊
-{%·for·product·in·products·%}␊
-<li>␊
-<h2>{{·product.name·}}</h2>␊
-Only·{{·product.price·|·price·}}␊
+····{%·for·product·in·products·%}␊
+····<li>␊
+········<h2>{{·product.name·}}</h2>␊
+········Only·{{·product.price·|·price·}}␊
 ␊
-{{·product.description·|·prettyprint·|·paragraph·}}␊
-</li>␊
-{%·endfor·%}␊
-</ul>␊
+········{{·product.description·|·prettyprint·|·paragraph·}}␊
+····</li>␊
+····{%·endfor·%}␊
+</ul>
\ No newline at end of file

Edit Mustache Example

🚧 Original Code

<div·class="entry">␊
<h1>{{title}}</h1>␊
<div·class="body">␊
{{body}}␊
</div>␊
</div>␊

🔧 0

Using JS-Beautify beautifier:

<div·class="entry">␊
<h1>{{title}}</h1>␊
<div·class="body">␊
␊
{{body}}␊
</div>␊
</div>

How to configure

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

{
  "Mustache": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
 <h1>{{title}}</h1>␊
 <div·class="body">␊
+␊
 {{body}}␊
 </div>␊
-</div>␊
+</div>
\ No newline at end of file

🔧 1

Using JS-Beautify beautifier:

<div·class="entry">␊
·<h1>{{title}}</h1>␊
·<div·class="body">␊
␊
··{{body}}␊
·</div>␊
</div>

How to configure

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

{
  "Mustache": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
-<h1>{{title}}</h1>␊
-<div·class="body">␊
-{{body}}␊
-</div>␊
-</div>␊
+·<h1>{{title}}</h1>␊
+·<div·class="body">␊
+␊
+··{{body}}␊
+·</div>␊
+</div>
\ No newline at end of file

🔧 2

Using JS-Beautify beautifier:

<div·class="entry">␊
··<h1>{{title}}</h1>␊
··<div·class="body">␊
␊
····{{body}}␊
··</div>␊
</div>

How to configure

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

{
  "Mustache": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
-<h1>{{title}}</h1>␊
-<div·class="body">␊
-{{body}}␊
-</div>␊
-</div>␊
+··<h1>{{title}}</h1>␊
+··<div·class="body">␊
+␊
+····{{body}}␊
+··</div>␊
+</div>
\ No newline at end of file

🔧 3

Using JS-Beautify beautifier:

<div·class="entry">␊
···<h1>{{title}}</h1>␊
···<div·class="body">␊
␊
······{{body}}␊
···</div>␊
</div>

How to configure

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

{
  "Mustache": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
-<h1>{{title}}</h1>␊
-<div·class="body">␊
-{{body}}␊
-</div>␊
-</div>␊
+···<h1>{{title}}</h1>␊
+···<div·class="body">␊
+␊
+······{{body}}␊
+···</div>␊
+</div>
\ No newline at end of file

🔧 4

Using JS-Beautify beautifier:

<div·class="entry">␊
····<h1>{{title}}</h1>␊
····<div·class="body">␊
␊
········{{body}}␊
····</div>␊
</div>

How to configure

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

{
  "Mustache": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,6 +1,7 @@
 <div·class="entry">␊
-<h1>{{title}}</h1>␊
-<div·class="body">␊
-{{body}}␊
-</div>␊
-</div>␊
+····<h1>{{title}}</h1>␊
+····<div·class="body">␊
+␊
+········{{body}}␊
+····</div>␊
+</div>
\ No newline at end of file

Edit Python Example

🚧 Original Code

x·=·{··'a':37,'b':42,␊
␊
'c':927}␊
␊
y·=·'hello·''world'␊
z·=·'hello·'+'world'␊
a·=·'hello·{}'.format('world')␊
class·foo··(·····object··):␊
··def·f····(self···):␊
····return·······37*-+2␊
··def·g(self,·x,y=42):␊
······return·y␊
def·f··(···a·)·:␊
··return······37+-+a[42-x·:··y**3]␊

🔧 0

Using YAPF beautifier:

x·=·{'a':·37,·'b':·42,·'c':·927}␊
␊
y·=·'hello·'·'world'␊
z·=·'hello·'·+·'world'␊
a·=·'hello·{}'.format('world')␊
␊
␊
class·foo(object):␊
def·f(self):␊
return·37·*·-+2␊
␊
def·g(self,·x,·y=42):␊
return·y␊
␊
␊
def·f(a):␊
return·37·+·-+a[42·-·x:y**3]␊

How to configure

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

{
  "Python": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "YAPF"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,14 +1,17 @@
-x·=·{··'a':37,'b':42,␊
+x·=·{'a':·37,·'b':·42,·'c':·927}␊
 ␊
-'c':927}␊
+y·=·'hello·'·'world'␊
+z·=·'hello·'·+·'world'␊
+a·=·'hello·{}'.format('world')␊
 ␊
-y·=·'hello·''world'␊
-z·=·'hello·'+'world'␊
-a·=·'hello·{}'.format('world')␊
-class·foo··(·····object··):␊
-··def·f····(self···):␊
-····return·······37*-+2␊
-··def·g(self,·x,y=42):␊
-······return·y␊
-def·f··(···a·)·:␊
-··return······37+-+a[42-x·:··y**3]␊
+␊
+class·foo(object):␊
+def·f(self):␊
+return·37·*·-+2␊
+␊
+def·g(self,·x,·y=42):␊
+return·y␊
+␊
+␊
+def·f(a):␊
+return·37·+·-+a[42·-·x:y**3]␊

🔧 1

Using YAPF beautifier:

x·=·{'a':·37,·'b':·42,·'c':·927}␊
␊
y·=·'hello·'·'world'␊
z·=·'hello·'·+·'world'␊
a·=·'hello·{}'.format('world')␊
␊
␊
class·foo(object):␊
·def·f(self):␊
··return·37·*·-+2␊
␊
·def·g(self,·x,·y=42):␊
··return·y␊
␊
␊
def·f(a):␊
·return·37·+·-+a[42·-·x:y**3]␊

How to configure

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

{
  "Python": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "YAPF"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,14 +1,17 @@
-x·=·{··'a':37,'b':42,␊
+x·=·{'a':·37,·'b':·42,·'c':·927}␊
 ␊
-'c':927}␊
+y·=·'hello·'·'world'␊
+z·=·'hello·'·+·'world'␊
+a·=·'hello·{}'.format('world')␊
 ␊
-y·=·'hello·''world'␊
-z·=·'hello·'+'world'␊
-a·=·'hello·{}'.format('world')␊
-class·foo··(·····object··):␊
-··def·f····(self···):␊
-····return·······37*-+2␊
-··def·g(self,·x,y=42):␊
-······return·y␊
-def·f··(···a·)·:␊
-··return······37+-+a[42-x·:··y**3]␊
+␊
+class·foo(object):␊
+·def·f(self):␊
+··return·37·*·-+2␊
+␊
+·def·g(self,·x,·y=42):␊
+··return·y␊
+␊
+␊
+def·f(a):␊
+·return·37·+·-+a[42·-·x:y**3]␊

🔧 2

Using YAPF beautifier:

x·=·{'a':·37,·'b':·42,·'c':·927}␊
␊
y·=·'hello·'·'world'␊
z·=·'hello·'·+·'world'␊
a·=·'hello·{}'.format('world')␊
␊
␊
class·foo(object):␊
··def·f(self):␊
····return·37·*·-+2␊
␊
··def·g(self,·x,·y=42):␊
····return·y␊
␊
␊
def·f(a):␊
··return·37·+·-+a[42·-·x:y**3]␊

How to configure

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

{
  "Python": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "YAPF"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,14 +1,17 @@
-x·=·{··'a':37,'b':42,␊
+x·=·{'a':·37,·'b':·42,·'c':·927}␊
 ␊
-'c':927}␊
+y·=·'hello·'·'world'␊
+z·=·'hello·'·+·'world'␊
+a·=·'hello·{}'.format('world')␊
 ␊
-y·=·'hello·''world'␊
-z·=·'hello·'+'world'␊
-a·=·'hello·{}'.format('world')␊
-class·foo··(·····object··):␊
-··def·f····(self···):␊
-····return·······37*-+2␊
-··def·g(self,·x,y=42):␊
-······return·y␊
-def·f··(···a·)·:␊
-··return······37+-+a[42-x·:··y**3]␊
+␊
+class·foo(object):␊
+··def·f(self):␊
+····return·37·*·-+2␊
+␊
+··def·g(self,·x,·y=42):␊
+····return·y␊
+␊
+␊
+def·f(a):␊
+··return·37·+·-+a[42·-·x:y**3]␊

🔧 3

Using YAPF beautifier:

x·=·{'a':·37,·'b':·42,·'c':·927}␊
␊
y·=·'hello·'·'world'␊
z·=·'hello·'·+·'world'␊
a·=·'hello·{}'.format('world')␊
␊
␊
class·foo(object):␊
···def·f(self):␊
······return·37·*·-+2␊
␊
···def·g(self,·x,·y=42):␊
······return·y␊
␊
␊
def·f(a):␊
···return·37·+·-+a[42·-·x:y**3]␊

How to configure

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

{
  "Python": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "YAPF"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,14 +1,17 @@
-x·=·{··'a':37,'b':42,␊
+x·=·{'a':·37,·'b':·42,·'c':·927}␊
 ␊
-'c':927}␊
+y·=·'hello·'·'world'␊
+z·=·'hello·'·+·'world'␊
+a·=·'hello·{}'.format('world')␊
 ␊
-y·=·'hello·''world'␊
-z·=·'hello·'+'world'␊
-a·=·'hello·{}'.format('world')␊
-class·foo··(·····object··):␊
-··def·f····(self···):␊
-····return·······37*-+2␊
-··def·g(self,·x,y=42):␊
+␊
+class·foo(object):␊
+···def·f(self):␊
+······return·37·*·-+2␊
+␊
+···def·g(self,·x,·y=42):␊
 ······return·y␊
-def·f··(···a·)·:␊
-··return······37+-+a[42-x·:··y**3]␊
+␊
+␊
+def·f(a):␊
+···return·37·+·-+a[42·-·x:y**3]␊

🔧 4

Using YAPF beautifier:

x·=·{'a':·37,·'b':·42,·'c':·927}␊
␊
y·=·'hello·'·'world'␊
z·=·'hello·'·+·'world'␊
a·=·'hello·{}'.format('world')␊
␊
␊
class·foo(object):␊
····def·f(self):␊
········return·37·*·-+2␊
␊
····def·g(self,·x,·y=42):␊
········return·y␊
␊
␊
def·f(a):␊
····return·37·+·-+a[42·-·x:y**3]␊

How to configure

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

{
  "Python": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "YAPF"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,14 +1,17 @@
-x·=·{··'a':37,'b':42,␊
+x·=·{'a':·37,·'b':·42,·'c':·927}␊
 ␊
-'c':927}␊
+y·=·'hello·'·'world'␊
+z·=·'hello·'·+·'world'␊
+a·=·'hello·{}'.format('world')␊
 ␊
-y·=·'hello·''world'␊
-z·=·'hello·'+'world'␊
-a·=·'hello·{}'.format('world')␊
-class·foo··(·····object··):␊
-··def·f····(self···):␊
-····return·······37*-+2␊
-··def·g(self,·x,y=42):␊
-······return·y␊
-def·f··(···a·)·:␊
-··return······37+-+a[42-x·:··y**3]␊
+␊
+class·foo(object):␊
+····def·f(self):␊
+········return·37·*·-+2␊
+␊
+····def·g(self,·x,·y=42):␊
+········return·y␊
+␊
+␊
+def·f(a):␊
+····return·37·+·-+a[42·-·x:y**3]␊

Edit Riot Example

🚧 Original Code

<todo>␊
␊
<!--·layout·-->␊
<h3>{·opts.title·}</h3>␊
␊
<ul>␊
<li·each={·item,·i·in·items·}>{·item·}</li>␊
</ul>␊
␊
<form·onsubmit={·add·}>␊
<input·ref="input">␊
<button>Add·#{·items.length·+·1·}</button>␊
</form>␊
␊
<!--·style·-->␊
<style>␊
h3·{␊
font-size:·14px;␊
}␊
</style>␊
␊
<!--·logic·-->␊
<script>␊
this.items·=·[]␊
␊
add(e)·{␊
e.preventDefault()␊
var·input·=·this.refs.input␊
this.items.push(input.value)␊
input.value·=·''␊
}␊
</script>␊
␊
</todo>␊

🔧 0

Using Pretty Diff beautifier:

<todo>␊
␊
··<!--·layout·-->␊
··<h3>{·opts.title·}</h3>␊
␊
··<ul>␊
····<li·each={·item,·i·in·items·}>{·item·}</li>␊
··</ul>␊
␊
··<form·onsubmit={·add·}>␊
····<input·ref="input">␊
······<button>Add·#{·items.length·+·1·}</button>␊
····</form>␊
␊
····<!--·style·-->␊
····<style>␊
······h3·{␊
········font-size:·14px;␊
······}␊
····</style>␊
␊
····<!--·logic·-->␊
····<script>␊
······this.items·=·[]␊
␊
······add(e)·{␊
········e.preventDefault()␊
········var·input·=·this.refs.input␊
········this.items.push(input.value)␊
········input.value·=·''␊
······}␊
····</script>␊
␊
··</todo>

How to configure

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

{
  "Riot": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,34 +1,34 @@
 <todo>␊
 ␊
-<!--·layout·-->␊
-<h3>{·opts.title·}</h3>␊
+··<!--·layout·-->␊
+··<h3>{·opts.title·}</h3>␊
 ␊
-<ul>␊
-<li·each={·item,·i·in·items·}>{·item·}</li>␊
-</ul>␊
+··<ul>␊
+····<li·each={·item,·i·in·items·}>{·item·}</li>␊
+··</ul>␊
 ␊
-<form·onsubmit={·add·}>␊
-<input·ref="input">␊
-<button>Add·#{·items.length·+·1·}</button>␊
-</form>␊
+··<form·onsubmit={·add·}>␊
+····<input·ref="input">␊
+······<button>Add·#{·items.length·+·1·}</button>␊
+····</form>␊
 ␊
-<!--·style·-->␊
-<style>␊
-h3·{␊
-font-size:·14px;␊
-}␊
-</style>␊
+····<!--·style·-->␊
+····<style>␊
+······h3·{␊
+········font-size:·14px;␊
+······}␊
+····</style>␊
 ␊
-<!--·logic·-->␊
-<script>␊
-this.items·=·[]␊
+····<!--·logic·-->␊
+····<script>␊
+······this.items·=·[]␊
 ␊
-add(e)·{␊
-e.preventDefault()␊
-var·input·=·this.refs.input␊
-this.items.push(input.value)␊
-input.value·=·''␊
-}␊
-</script>␊
+······add(e)·{␊
+········e.preventDefault()␊
+········var·input·=·this.refs.input␊
+········this.items.push(input.value)␊
+········input.value·=·''␊
+······}␊
+····</script>␊
 ␊
-</todo>␊
+··</todo>
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

<todo>␊
␊
·<!--·layout·-->␊
·<h3>{·opts.title·}</h3>␊
␊
·<ul>␊
··<li·each={·item,·i·in·items·}>{·item·}</li>␊
·</ul>␊
␊
·<form·onsubmit={·add·}>␊
··<input·ref="input">␊
···<button>Add·#{·items.length·+·1·}</button>␊
··</form>␊
␊
··<!--·style·-->␊
··<style>␊
···h3·{␊
····font-size:·14px;␊
···}␊
··</style>␊
␊
··<!--·logic·-->␊
··<script>␊
···this.items·=·[]␊
␊
···add(e)·{␊
····e.preventDefault()␊
····var·input·=·this.refs.input␊
····this.items.push(input.value)␊
····input.value·=·''␊
···}␊
··</script>␊
␊
·</todo>

How to configure

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

{
  "Riot": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,34 +1,34 @@
 <todo>␊
 ␊
-<!--·layout·-->␊
-<h3>{·opts.title·}</h3>␊
+·<!--·layout·-->␊
+·<h3>{·opts.title·}</h3>␊
 ␊
-<ul>␊
-<li·each={·item,·i·in·items·}>{·item·}</li>␊
-</ul>␊
+·<ul>␊
+··<li·each={·item,·i·in·items·}>{·item·}</li>␊
+·</ul>␊
 ␊
-<form·onsubmit={·add·}>␊
-<input·ref="input">␊
-<button>Add·#{·items.length·+·1·}</button>␊
-</form>␊
+·<form·onsubmit={·add·}>␊
+··<input·ref="input">␊
+···<button>Add·#{·items.length·+·1·}</button>␊
+··</form>␊
 ␊
-<!--·style·-->␊
-<style>␊
-h3·{␊
-font-size:·14px;␊
-}␊
-</style>␊
+··<!--·style·-->␊
+··<style>␊
+···h3·{␊
+····font-size:·14px;␊
+···}␊
+··</style>␊
 ␊
-<!--·logic·-->␊
-<script>␊
-this.items·=·[]␊
+··<!--·logic·-->␊
+··<script>␊
+···this.items·=·[]␊
 ␊
-add(e)·{␊
-e.preventDefault()␊
-var·input·=·this.refs.input␊
-this.items.push(input.value)␊
-input.value·=·''␊
-}␊
-</script>␊
+···add(e)·{␊
+····e.preventDefault()␊
+····var·input·=·this.refs.input␊
+····this.items.push(input.value)␊
+····input.value·=·''␊
+···}␊
+··</script>␊
 ␊
-</todo>␊
+·</todo>
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

<todo>␊
␊
··<!--·layout·-->␊
··<h3>{·opts.title·}</h3>␊
␊
··<ul>␊
····<li·each={·item,·i·in·items·}>{·item·}</li>␊
··</ul>␊
␊
··<form·onsubmit={·add·}>␊
····<input·ref="input">␊
······<button>Add·#{·items.length·+·1·}</button>␊
····</form>␊
␊
····<!--·style·-->␊
····<style>␊
······h3·{␊
········font-size:·14px;␊
······}␊
····</style>␊
␊
····<!--·logic·-->␊
····<script>␊
······this.items·=·[]␊
␊
······add(e)·{␊
········e.preventDefault()␊
········var·input·=·this.refs.input␊
········this.items.push(input.value)␊
········input.value·=·''␊
······}␊
····</script>␊
␊
··</todo>

How to configure

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

{
  "Riot": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,34 +1,34 @@
 <todo>␊
 ␊
-<!--·layout·-->␊
-<h3>{·opts.title·}</h3>␊
+··<!--·layout·-->␊
+··<h3>{·opts.title·}</h3>␊
 ␊
-<ul>␊
-<li·each={·item,·i·in·items·}>{·item·}</li>␊
-</ul>␊
+··<ul>␊
+····<li·each={·item,·i·in·items·}>{·item·}</li>␊
+··</ul>␊
 ␊
-<form·onsubmit={·add·}>␊
-<input·ref="input">␊
-<button>Add·#{·items.length·+·1·}</button>␊
-</form>␊
+··<form·onsubmit={·add·}>␊
+····<input·ref="input">␊
+······<button>Add·#{·items.length·+·1·}</button>␊
+····</form>␊
 ␊
-<!--·style·-->␊
-<style>␊
-h3·{␊
-font-size:·14px;␊
-}␊
-</style>␊
+····<!--·style·-->␊
+····<style>␊
+······h3·{␊
+········font-size:·14px;␊
+······}␊
+····</style>␊
 ␊
-<!--·logic·-->␊
-<script>␊
-this.items·=·[]␊
+····<!--·logic·-->␊
+····<script>␊
+······this.items·=·[]␊
 ␊
-add(e)·{␊
-e.preventDefault()␊
-var·input·=·this.refs.input␊
-this.items.push(input.value)␊
-input.value·=·''␊
-}␊
-</script>␊
+······add(e)·{␊
+········e.preventDefault()␊
+········var·input·=·this.refs.input␊
+········this.items.push(input.value)␊
+········input.value·=·''␊
+······}␊
+····</script>␊
 ␊
-</todo>␊
+··</todo>
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

<todo>␊
␊
···<!--·layout·-->␊
···<h3>{·opts.title·}</h3>␊
␊
···<ul>␊
······<li·each={·item,·i·in·items·}>{·item·}</li>␊
···</ul>␊
␊
···<form·onsubmit={·add·}>␊
······<input·ref="input">␊
·········<button>Add·#{·items.length·+·1·}</button>␊
······</form>␊
␊
······<!--·style·-->␊
······<style>␊
·········h3·{␊
············font-size:·14px;␊
·········}␊
······</style>␊
␊
······<!--·logic·-->␊
······<script>␊
·········this.items·=·[]␊
␊
·········add(e)·{␊
············e.preventDefault()␊
············var·input·=·this.refs.input␊
············this.items.push(input.value)␊
············input.value·=·''␊
·········}␊
······</script>␊
␊
···</todo>

How to configure

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

{
  "Riot": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,34 +1,34 @@
 <todo>␊
 ␊
-<!--·layout·-->␊
-<h3>{·opts.title·}</h3>␊
+···<!--·layout·-->␊
+···<h3>{·opts.title·}</h3>␊
 ␊
-<ul>␊
-<li·each={·item,·i·in·items·}>{·item·}</li>␊
-</ul>␊
+···<ul>␊
+······<li·each={·item,·i·in·items·}>{·item·}</li>␊
+···</ul>␊
 ␊
-<form·onsubmit={·add·}>␊
-<input·ref="input">␊
-<button>Add·#{·items.length·+·1·}</button>␊
-</form>␊
+···<form·onsubmit={·add·}>␊
+······<input·ref="input">␊
+·········<button>Add·#{·items.length·+·1·}</button>␊
+······</form>␊
 ␊
-<!--·style·-->␊
-<style>␊
-h3·{␊
-font-size:·14px;␊
-}␊
-</style>␊
+······<!--·style·-->␊
+······<style>␊
+·········h3·{␊
+············font-size:·14px;␊
+·········}␊
+······</style>␊
 ␊
-<!--·logic·-->␊
-<script>␊
-this.items·=·[]␊
+······<!--·logic·-->␊
+······<script>␊
+·········this.items·=·[]␊
 ␊
-add(e)·{␊
-e.preventDefault()␊
-var·input·=·this.refs.input␊
-this.items.push(input.value)␊
-input.value·=·''␊
-}␊
-</script>␊
+·········add(e)·{␊
+············e.preventDefault()␊
+············var·input·=·this.refs.input␊
+············this.items.push(input.value)␊
+············input.value·=·''␊
+·········}␊
+······</script>␊
 ␊
-</todo>␊
+···</todo>
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

<todo>␊
␊
····<!--·layout·-->␊
····<h3>{·opts.title·}</h3>␊
␊
····<ul>␊
········<li·each={·item,·i·in·items·}>{·item·}</li>␊
····</ul>␊
␊
····<form·onsubmit={·add·}>␊
········<input·ref="input">␊
············<button>Add·#{·items.length·+·1·}</button>␊
········</form>␊
␊
········<!--·style·-->␊
········<style>␊
············h3·{␊
················font-size:·14px;␊
············}␊
········</style>␊
␊
········<!--·logic·-->␊
········<script>␊
············this.items·=·[]␊
␊
············add(e)·{␊
················e.preventDefault()␊
················var·input·=·this.refs.input␊
················this.items.push(input.value)␊
················input.value·=·''␊
············}␊
········</script>␊
␊
····</todo>

How to configure

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

{
  "Riot": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,34 +1,34 @@
 <todo>␊
 ␊
-<!--·layout·-->␊
-<h3>{·opts.title·}</h3>␊
+····<!--·layout·-->␊
+····<h3>{·opts.title·}</h3>␊
 ␊
-<ul>␊
-<li·each={·item,·i·in·items·}>{·item·}</li>␊
-</ul>␊
+····<ul>␊
+········<li·each={·item,·i·in·items·}>{·item·}</li>␊
+····</ul>␊
 ␊
-<form·onsubmit={·add·}>␊
-<input·ref="input">␊
-<button>Add·#{·items.length·+·1·}</button>␊
-</form>␊
+····<form·onsubmit={·add·}>␊
+········<input·ref="input">␊
+············<button>Add·#{·items.length·+·1·}</button>␊
+········</form>␊
 ␊
-<!--·style·-->␊
-<style>␊
-h3·{␊
-font-size:·14px;␊
-}␊
-</style>␊
+········<!--·style·-->␊
+········<style>␊
+············h3·{␊
+················font-size:·14px;␊
+············}␊
+········</style>␊
 ␊
-<!--·logic·-->␊
-<script>␊
-this.items·=·[]␊
+········<!--·logic·-->␊
+········<script>␊
+············this.items·=·[]␊
 ␊
-add(e)·{␊
-e.preventDefault()␊
-var·input·=·this.refs.input␊
-this.items.push(input.value)␊
-input.value·=·''␊
-}␊
-</script>␊
+············add(e)·{␊
+················e.preventDefault()␊
+················var·input·=·this.refs.input␊
+················this.items.push(input.value)␊
+················input.value·=·''␊
+············}␊
+········</script>␊
 ␊
-</todo>␊
+····</todo>
\ No newline at end of file

Edit SCSS Example

🚧 Original Code

nav·{␊
··ul·{␊
····margin:·0;␊
····padding:·0;␊
····list-style:·none;␊
··}␊
␊
··li·{·display:·inline-block;·}␊
␊
··a·{␊
····display:·block;␊
····padding:·6px·12px;␊
····text-decoration:·none;␊
··}␊
}

🔧 0

Using Prettier beautifier:

nav·{␊
ul·{␊
margin:·0;␊
padding:·0;␊
list-style:·none;␊
}␊
␊
li·{␊
display:·inline-block;␊
}␊
␊
a·{␊
display:·block;␊
padding:·6px·12px;␊
text-decoration:·none;␊
}␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,15 +1,17 @@
 nav·{␊
-··ul·{␊
-····margin:·0;␊
-····padding:·0;␊
-····list-style:·none;␊
-··}␊
+ul·{␊
+margin:·0;␊
+padding:·0;␊
+list-style:·none;␊
+}␊
 ␊
-··li·{·display:·inline-block;·}␊
+li·{␊
+display:·inline-block;␊
\ No newline at end of file
+}␊
 ␊
-··a·{␊
-····display:·block;␊
-····padding:·6px·12px;␊
-····text-decoration:·none;␊
-··}␊
-}
+a·{␊
+display:·block;␊
+padding:·6px·12px;␊
+text-decoration:·none;␊
+}␊
+}␊

🔧 1

Using Prettier beautifier:

nav·{␊
·ul·{␊
··margin:·0;␊
··padding:·0;␊
··list-style:·none;␊
·}␊
␊
·li·{␊
··display:·inline-block;␊
·}␊
␊
·a·{␊
··display:·block;␊
··padding:·6px·12px;␊
··text-decoration:·none;␊
·}␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,15 +1,17 @@
 nav·{␊
-··ul·{␊
-····margin:·0;␊
-····padding:·0;␊
-····list-style:·none;␊
-··}␊
+·ul·{␊
+··margin:·0;␊
+··padding:·0;␊
+··list-style:·none;␊
+·}␊
 ␊
-··li·{·display:·inline-block;·}␊
+·li·{␊
+··display:·inline-block;␊
\ No newline at end of file
+·}␊
 ␊
-··a·{␊
-····display:·block;␊
-····padding:·6px·12px;␊
-····text-decoration:·none;␊
-··}␊
-}
+·a·{␊
+··display:·block;␊
+··padding:·6px·12px;␊
+··text-decoration:·none;␊
+·}␊
+}␊

🔧 2

Using Prettier beautifier:

nav·{␊
··ul·{␊
····margin:·0;␊
····padding:·0;␊
····list-style:·none;␊
··}␊
␊
··li·{␊
····display:·inline-block;␊
··}␊
␊
··a·{␊
····display:·block;␊
····padding:·6px·12px;␊
····text-decoration:·none;␊
··}␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -4,12 +4,14 @@
 ····padding:·0;␊
 ····list-style:·none;␊
 ··}␊
 ␊
-··li·{·display:·inline-block;·}␊
+··li·{␊
+····display:·inline-block;␊
+··}␊
 ␊
 ··a·{␊
 ····display:·block;␊
 ····padding:·6px·12px;␊
\ No newline at end of file
 ····text-decoration:·none;␊
 ··}␊
-}
+}␊

🔧 3

Using Prettier beautifier:

nav·{␊
···ul·{␊
······margin:·0;␊
······padding:·0;␊
······list-style:·none;␊
···}␊
␊
···li·{␊
······display:·inline-block;␊
···}␊
␊
···a·{␊
······display:·block;␊
······padding:·6px·12px;␊
······text-decoration:·none;␊
···}␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,15 +1,17 @@
 nav·{␊
-··ul·{␊
-····margin:·0;␊
-····padding:·0;␊
-····list-style:·none;␊
-··}␊
+···ul·{␊
+······margin:·0;␊
+······padding:·0;␊
+······list-style:·none;␊
+···}␊
 ␊
-··li·{·display:·inline-block;·}␊
+···li·{␊
+······display:·inline-block;␊
\ No newline at end of file
+···}␊
 ␊
-··a·{␊
-····display:·block;␊
-····padding:·6px·12px;␊
-····text-decoration:·none;␊
-··}␊
-}
+···a·{␊
+······display:·block;␊
+······padding:·6px·12px;␊
+······text-decoration:·none;␊
+···}␊
+}␊

🔧 4

Using Prettier beautifier:

nav·{␊
····ul·{␊
········margin:·0;␊
········padding:·0;␊
········list-style:·none;␊
····}␊
␊
····li·{␊
········display:·inline-block;␊
····}␊
␊
····a·{␊
········display:·block;␊
········padding:·6px·12px;␊
········text-decoration:·none;␊
····}␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,15 +1,17 @@
 nav·{␊
-··ul·{␊
-····margin:·0;␊
-····padding:·0;␊
-····list-style:·none;␊
-··}␊
+····ul·{␊
+········margin:·0;␊
+········padding:·0;␊
+········list-style:·none;␊
+····}␊
 ␊
-··li·{·display:·inline-block;·}␊
+····li·{␊
+········display:·inline-block;␊
\ No newline at end of file
+····}␊
 ␊
-··a·{␊
-····display:·block;␊
-····padding:·6px·12px;␊
-····text-decoration:·none;␊
-··}␊
-}
+····a·{␊
+········display:·block;␊
+········padding:·6px·12px;␊
+········text-decoration:·none;␊
+····}␊
+}␊

Edit SQL Example

🚧 Original Code

select·K.a,K.b·from·(select·H.b·from·(select·G.c·from·(select·F.d·from␊
(select·E.e·from·A,·B,·C,·D,·E),·F),·G),·H),·I,·J,·K·order·by·1,2;␊

🔧 0

Using sqlformat beautifier:

select·K.a,␊
·······K.b␊
from␊
··(select·H.b␊
···from␊
·····(select·G.c␊
······from␊
········(select·F.d␊
·········from␊
···········(select·E.e␊
············from·A,␊
·················B,␊
·················C,␊
·················D,␊
·················E),·F),·G),·H),·I,␊
·································J,␊
·································K␊
order·by·1,␊
·········2;

How to configure

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

{
  "SQL": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "sqlformat"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,2 +1,19 @@
-select·K.a,K.b·from·(select·H.b·from·(select·G.c·from·(select·F.d·from␊
-(select·E.e·from·A,·B,·C,·D,·E),·F),·G),·H),·I,·J,·K·order·by·1,2;␊
+select·K.a,␊
+·······K.b␊
+from␊
+··(select·H.b␊
+···from␊
+·····(select·G.c␊
+······from␊
+········(select·F.d␊
+·········from␊
+···········(select·E.e␊
+············from·A,␊
+·················B,␊
+·················C,␊
+·················D,␊
+·················E),·F),·G),·H),·I,␊
+·································J,␊
+·································K␊
+order·by·1,␊
+·········2;
\ No newline at end of file

🔧 1

Using sqlformat beautifier:

select·K.a,␊
·······K.b␊
from␊
·(select·H.b␊
··from␊
···(select·G.c␊
····from␊
·····(select·F.d␊
······from␊
·······(select·E.e␊
········from·A,␊
·············B,␊
·············C,␊
·············D,␊
·············E),·F),·G),·H),·I,␊
·····························J,␊
·····························K␊
order·by·1,␊
·········2;

How to configure

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

{
  "SQL": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "sqlformat"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,2 +1,19 @@
-select·K.a,K.b·from·(select·H.b·from·(select·G.c·from·(select·F.d·from␊
-(select·E.e·from·A,·B,·C,·D,·E),·F),·G),·H),·I,·J,·K·order·by·1,2;␊
+select·K.a,␊
+·······K.b␊
+from␊
+·(select·H.b␊
+··from␊
+···(select·G.c␊
+····from␊
+·····(select·F.d␊
+······from␊
+·······(select·E.e␊
+········from·A,␊
+·············B,␊
+·············C,␊
+·············D,␊
+·············E),·F),·G),·H),·I,␊
+·····························J,␊
+·····························K␊
+order·by·1,␊
+·········2;
\ No newline at end of file

🔧 2

Using sqlformat beautifier:

select·K.a,␊
·······K.b␊
from␊
··(select·H.b␊
···from␊
·····(select·G.c␊
······from␊
········(select·F.d␊
·········from␊
···········(select·E.e␊
············from·A,␊
·················B,␊
·················C,␊
·················D,␊
·················E),·F),·G),·H),·I,␊
·································J,␊
·································K␊
order·by·1,␊
·········2;

How to configure

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

{
  "SQL": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "sqlformat"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,2 +1,19 @@
-select·K.a,K.b·from·(select·H.b·from·(select·G.c·from·(select·F.d·from␊
-(select·E.e·from·A,·B,·C,·D,·E),·F),·G),·H),·I,·J,·K·order·by·1,2;␊
+select·K.a,␊
+·······K.b␊
+from␊
+··(select·H.b␊
+···from␊
+·····(select·G.c␊
+······from␊
+········(select·F.d␊
+·········from␊
+···········(select·E.e␊
+············from·A,␊
+·················B,␊
+·················C,␊
+·················D,␊
+·················E),·F),·G),·H),·I,␊
+·································J,␊
+·································K␊
+order·by·1,␊
+·········2;
\ No newline at end of file

🔧 3

Using sqlformat beautifier:

select·K.a,␊
·······K.b␊
from␊
···(select·H.b␊
····from␊
·······(select·G.c␊
········from␊
···········(select·F.d␊
············from␊
···············(select·E.e␊
················from·A,␊
·····················B,␊
·····················C,␊
·····················D,␊
·····················E),·F),·G),·H),·I,␊
·····································J,␊
·····································K␊
order·by·1,␊
·········2;

How to configure

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

{
  "SQL": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "sqlformat"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,2 +1,19 @@
-select·K.a,K.b·from·(select·H.b·from·(select·G.c·from·(select·F.d·from␊
-(select·E.e·from·A,·B,·C,·D,·E),·F),·G),·H),·I,·J,·K·order·by·1,2;␊
+select·K.a,␊
+·······K.b␊
+from␊
+···(select·H.b␊
+····from␊
+·······(select·G.c␊
+········from␊
+···········(select·F.d␊
+············from␊
+···············(select·E.e␊
+················from·A,␊
+·····················B,␊
+·····················C,␊
+·····················D,␊
+·····················E),·F),·G),·H),·I,␊
+·····································J,␊
+·····································K␊
+order·by·1,␊
+·········2;
\ No newline at end of file

🔧 4

Using sqlformat beautifier:

select·K.a,␊
·······K.b␊
from␊
····(select·H.b␊
·····from␊
·········(select·G.c␊
··········from␊
··············(select·F.d␊
···············from␊
···················(select·E.e␊
····················from·A,␊
·························B,␊
·························C,␊
·························D,␊
·························E),·F),·G),·H),·I,␊
·········································J,␊
·········································K␊
order·by·1,␊
·········2;

How to configure

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

{
  "SQL": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "sqlformat"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,2 +1,19 @@
-select·K.a,K.b·from·(select·H.b·from·(select·G.c·from·(select·F.d·from␊
-(select·E.e·from·A,·B,·C,·D,·E),·F),·G),·H),·I,·J,·K·order·by·1,2;␊
+select·K.a,␊
+·······K.b␊
+from␊
+····(select·H.b␊
+·····from␊
+·········(select·G.c␊
+··········from␊
+··············(select·F.d␊
+···············from␊
+···················(select·E.e␊
+····················from·A,␊
+·························B,␊
+·························C,␊
+·························D,␊
+·························E),·F),·G),·H),·I,␊
+·········································J,␊
+·········································K␊
+order·by·1,␊
+·········2;
\ No newline at end of file

Edit SVG Example

🚧 Original Code

<svg·height="100"·width="100">␊
<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"·/>␊
Sorry,·your·browser·does·not·support·inline·SVG.··␊
</svg>␊

🔧 0

Using Pretty Diff beautifier:

<svg·height="100"·width="100">␊
··<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
··Sorry,·your·browser·does·not·support·inline·SVG.␊
</svg>

How to configure

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

{
  "SVG": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,4 +1,4 @@
 <svg·height="100"·width="100">␊
-<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"·/>␊
-Sorry,·your·browser·does·not·support·inline·SVG.··␊
-</svg>␊
+··<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
+··Sorry,·your·browser·does·not·support·inline·SVG.␊
+</svg>
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

<svg·height="100"·width="100">␊
·<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
·Sorry,·your·browser·does·not·support·inline·SVG.␊
</svg>

How to configure

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

{
  "SVG": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,4 +1,4 @@
 <svg·height="100"·width="100">␊
-<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"·/>␊
-Sorry,·your·browser·does·not·support·inline·SVG.··␊
-</svg>␊
+·<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
+·Sorry,·your·browser·does·not·support·inline·SVG.␊
+</svg>
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

<svg·height="100"·width="100">␊
··<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
··Sorry,·your·browser·does·not·support·inline·SVG.␊
</svg>

How to configure

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

{
  "SVG": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,4 +1,4 @@
 <svg·height="100"·width="100">␊
-<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"·/>␊
-Sorry,·your·browser·does·not·support·inline·SVG.··␊
-</svg>␊
+··<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
+··Sorry,·your·browser·does·not·support·inline·SVG.␊
+</svg>
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

<svg·height="100"·width="100">␊
···<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
···Sorry,·your·browser·does·not·support·inline·SVG.␊
</svg>

How to configure

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

{
  "SVG": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,4 +1,4 @@
 <svg·height="100"·width="100">␊
-<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"·/>␊
-Sorry,·your·browser·does·not·support·inline·SVG.··␊
-</svg>␊
+···<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
+···Sorry,·your·browser·does·not·support·inline·SVG.␊
+</svg>
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

<svg·height="100"·width="100">␊
····<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
····Sorry,·your·browser·does·not·support·inline·SVG.␊
</svg>

How to configure

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

{
  "SVG": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,4 +1,4 @@
 <svg·height="100"·width="100">␊
-<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"·/>␊
-Sorry,·your·browser·does·not·support·inline·SVG.··␊
-</svg>␊
+····<circle·cx="50"·cy="50"·r="40"·stroke="black"·stroke-width="3"·fill="red"/>␊
+····Sorry,·your·browser·does·not·support·inline·SVG.␊
+</svg>
\ No newline at end of file

Edit Sass Example

🚧 Original Code

nav␊
··ul␊
····margin:·0␊
····padding:·0␊
····list-style:·none␊
␊
··li␊
····display:·inline-block␊
␊
··a␊
····display:·block␊
····padding:·6px·12px␊
····text-decoration:·none␊

🔧 0

Using stylelint beautifier:

nav␊
··ul␊
····margin:·0;ulmargin␊
····padding:·0;␊
····list-style:·none␊
␊
··li;␊
····display:·inline-block␊
␊
··a;␊
····display:·block;␊
····padding:·6px·12px;␊
····text-decoration:·none␊

How to configure

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

{
  "Sass": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,13 +1,13 @@
 nav␊
 ··ul␊
-····margin:·0␊
-····padding:·0␊
+····margin:·0;ulmargin␊
+····padding:·0;␊
 ····list-style:·none␊
 ␊
-··li␊
+··li;␊
 ····display:·inline-block␊
 ␊
-··a␊
-····display:·block␊
-····padding:·6px·12px␊
+··a;␊
+····display:·block;␊
+····padding:·6px·12px;␊
 ····text-decoration:·none␊

🔧 1

Using stylelint beautifier:

nav␊
··ul␊
····margin:·0;ulmargin␊
padding:·0;␊
list-style:·none␊
␊
·li;␊
display:·inline-block␊
␊
·a;␊
display:·block;␊
padding:·6px·12px;␊
text-decoration:·none␊

How to configure

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

{
  "Sass": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,13 +1,13 @@
 nav␊
 ··ul␊
-····margin:·0␊
-····padding:·0␊
-····list-style:·none␊
+····margin:·0;ulmargin␊
+padding:·0;␊
+list-style:·none␊
 ␊
-··li␊
-····display:·inline-block␊
+·li;␊
+display:·inline-block␊
 ␊
-··a␊
-····display:·block␊
-····padding:·6px·12px␊
-····text-decoration:·none␊
+·a;␊
+display:·block;␊
+padding:·6px·12px;␊
+text-decoration:·none␊

🔧 2

Using stylelint beautifier:

nav␊
··ul␊
····margin:·0;ulmargin␊
padding:·0;␊
list-style:·none␊
␊
··li;␊
display:·inline-block␊
␊
··a;␊
display:·block;␊
padding:·6px·12px;␊
text-decoration:·none␊

How to configure

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

{
  "Sass": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,13 +1,13 @@
 nav␊
 ··ul␊
-····margin:·0␊
-····padding:·0␊
-····list-style:·none␊
+····margin:·0;ulmargin␊
+padding:·0;␊
+list-style:·none␊
 ␊
-··li␊
-····display:·inline-block␊
+··li;␊
+display:·inline-block␊
 ␊
-··a␊
-····display:·block␊
-····padding:·6px·12px␊
-····text-decoration:·none␊
+··a;␊
+display:·block;␊
+padding:·6px·12px;␊
+text-decoration:·none␊

🔧 3

Using stylelint beautifier:

nav␊
··ul␊
····margin:·0;ulmargin␊
padding:·0;␊
list-style:·none␊
␊
···li;␊
display:·inline-block␊
␊
···a;␊
display:·block;␊
padding:·6px·12px;␊
text-decoration:·none␊

How to configure

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

{
  "Sass": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,13 +1,13 @@
 nav␊
 ··ul␊
-····margin:·0␊
-····padding:·0␊
-····list-style:·none␊
+····margin:·0;ulmargin␊
+padding:·0;␊
+list-style:·none␊
 ␊
-··li␊
-····display:·inline-block␊
+···li;␊
+display:·inline-block␊
 ␊
-··a␊
-····display:·block␊
-····padding:·6px·12px␊
-····text-decoration:·none␊
+···a;␊
+display:·block;␊
+padding:·6px·12px;␊
+text-decoration:·none␊

🔧 4

Using stylelint beautifier:

nav␊
··ul␊
····margin:·0;ulmargin␊
padding:·0;␊
list-style:·none␊
␊
····li;␊
display:·inline-block␊
␊
····a;␊
display:·block;␊
padding:·6px·12px;␊
text-decoration:·none␊

How to configure

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

{
  "Sass": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,13 +1,13 @@
 nav␊
 ··ul␊
-····margin:·0␊
-····padding:·0␊
-····list-style:·none␊
+····margin:·0;ulmargin␊
+padding:·0;␊
+list-style:·none␊
 ␊
-··li␊
-····display:·inline-block␊
+····li;␊
+display:·inline-block␊
 ␊
-··a␊
-····display:·block␊
-····padding:·6px·12px␊
-····text-decoration:·none␊
+····a;␊
+display:·block;␊
+padding:·6px·12px;␊
+text-decoration:·none␊

Edit Spacebars Example

🚧 Original Code

<template·name="Todos_item">␊
<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
<label·class="checkbox">␊
<input·type="checkbox"·checked={{todo.checked}}·name="checked">␊
<span·class="checkbox-custom"></span>␊
</label>␊
␊
<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
<a·class="js-delete-item·delete-item"·href="#">␊
<span·class="icon-trash"></span>␊
</a>␊
</div>␊
</template>␊

🔧 0

Using Pretty Diff beautifier:

<template·name="Todos_item">␊
··<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
····<label·class="checkbox">␊
······<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
······<span·class="checkbox-custom"></span>␊
····</label>␊
␊
····<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
····<a·class="js-delete-item·delete-item"·href="#">␊
······<span·class="icon-trash"></span>␊
····</a>␊
··</div>␊
</template>

How to configure

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

{
  "Spacebars": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,13 +1,13 @@
 <template·name="Todos_item">␊
-<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
-<label·class="checkbox">␊
-<input·type="checkbox"·checked={{todo.checked}}·name="checked">␊
-<span·class="checkbox-custom"></span>␊
-</label>␊
+··<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
+····<label·class="checkbox">␊
+······<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
+······<span·class="checkbox-custom"></span>␊
+····</label>␊
 ␊
-<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
-<a·class="js-delete-item·delete-item"·href="#">␊
-<span·class="icon-trash"></span>␊
-</a>␊
-</div>␊
-</template>␊
+····<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
+····<a·class="js-delete-item·delete-item"·href="#">␊
+······<span·class="icon-trash"></span>␊
+····</a>␊
+··</div>␊
+</template>
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

<template·name="Todos_item">␊
·<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
··<label·class="checkbox">␊
···<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
···<span·class="checkbox-custom"></span>␊
··</label>␊
␊
··<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
··<a·class="js-delete-item·delete-item"·href="#">␊
···<span·class="icon-trash"></span>␊
··</a>␊
·</div>␊
</template>

How to configure

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

{
  "Spacebars": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,13 +1,13 @@
 <template·name="Todos_item">␊
-<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
-<label·class="checkbox">␊
-<input·type="checkbox"·checked={{todo.checked}}·name="checked">␊
-<span·class="checkbox-custom"></span>␊
-</label>␊
+·<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
+··<label·class="checkbox">␊
+···<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
+···<span·class="checkbox-custom"></span>␊
+··</label>␊
 ␊
-<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
-<a·class="js-delete-item·delete-item"·href="#">␊
-<span·class="icon-trash"></span>␊
-</a>␊
-</div>␊
-</template>␊
+··<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
+··<a·class="js-delete-item·delete-item"·href="#">␊
+···<span·class="icon-trash"></span>␊
+··</a>␊
+·</div>␊
+</template>
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

<template·name="Todos_item">␊
··<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
····<label·class="checkbox">␊
······<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
······<span·class="checkbox-custom"></span>␊
····</label>␊
␊
····<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
····<a·class="js-delete-item·delete-item"·href="#">␊
······<span·class="icon-trash"></span>␊
····</a>␊
··</div>␊
</template>

How to configure

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

{
  "Spacebars": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,13 +1,13 @@
 <template·name="Todos_item">␊
-<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
-<label·class="checkbox">␊
-<input·type="checkbox"·checked={{todo.checked}}·name="checked">␊
-<span·class="checkbox-custom"></span>␊
-</label>␊
+··<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
+····<label·class="checkbox">␊
+······<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
+······<span·class="checkbox-custom"></span>␊
+····</label>␊
 ␊
-<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
-<a·class="js-delete-item·delete-item"·href="#">␊
-<span·class="icon-trash"></span>␊
-</a>␊
-</div>␊
-</template>␊
+····<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
+····<a·class="js-delete-item·delete-item"·href="#">␊
+······<span·class="icon-trash"></span>␊
+····</a>␊
+··</div>␊
+</template>
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

<template·name="Todos_item">␊
···<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
······<label·class="checkbox">␊
·········<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
·········<span·class="checkbox-custom"></span>␊
······</label>␊
␊
······<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
······<a·class="js-delete-item·delete-item"·href="#">␊
·········<span·class="icon-trash"></span>␊
······</a>␊
···</div>␊
</template>

How to configure

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

{
  "Spacebars": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,13 +1,13 @@
 <template·name="Todos_item">␊
-<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
-<label·class="checkbox">␊
-<input·type="checkbox"·checked={{todo.checked}}·name="checked">␊
-<span·class="checkbox-custom"></span>␊
-</label>␊
+···<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
+······<label·class="checkbox">␊
+·········<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
+·········<span·class="checkbox-custom"></span>␊
+······</label>␊
 ␊
-<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
-<a·class="js-delete-item·delete-item"·href="#">␊
-<span·class="icon-trash"></span>␊
-</a>␊
-</div>␊
-</template>␊
+······<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
+······<a·class="js-delete-item·delete-item"·href="#">␊
+·········<span·class="icon-trash"></span>␊
+······</a>␊
+···</div>␊
+</template>
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

<template·name="Todos_item">␊
····<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
········<label·class="checkbox">␊
············<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
············<span·class="checkbox-custom"></span>␊
········</label>␊
␊
········<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
········<a·class="js-delete-item·delete-item"·href="#">␊
············<span·class="icon-trash"></span>␊
········</a>␊
····</div>␊
</template>

How to configure

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

{
  "Spacebars": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,13 +1,13 @@
 <template·name="Todos_item">␊
-<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
-<label·class="checkbox">␊
-<input·type="checkbox"·checked={{todo.checked}}·name="checked">␊
-<span·class="checkbox-custom"></span>␊
-</label>␊
+····<div·class="list-item·{{checkedClass·todo}}·{{editingClass·editing}}">␊
+········<label·class="checkbox">␊
+············<input·type="checkbox"·checked={{todo.checked}·}="}"·name="checked">␊
+············<span·class="checkbox-custom"></span>␊
+········</label>␊
 ␊
-<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
-<a·class="js-delete-item·delete-item"·href="#">␊
-<span·class="icon-trash"></span>␊
-</a>␊
-</div>␊
-</template>␊
+········<input·type="text"·value="{{todo.text}}"·placeholder="Task·name">␊
+········<a·class="js-delete-item·delete-item"·href="#">␊
+············<span·class="icon-trash"></span>␊
+········</a>␊
+····</div>␊
+</template>
\ No newline at end of file

Edit SugarSS Example

🚧 Original Code

a␊
··color:·blue␊
␊
.multiline,␊
.selector␊
··box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
··············1px·0·3px·rgba(0,·0,·0,·.6)␊
␊
//·Mobile␊
@media·(max-width:·400px)␊
··.body␊
····padding:·0·10px␊

🔧 0

Using stylelint beautifier:

a␊
··color:·blue␊
␊
.multiline,␊
.selector;color␊
··box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
··············1px·0·3px·rgba(0,·0,·0,·.6)␊
␊
//·Mobile␊
@media·(max-width:·400px)␊
··.body;␊
····padding:·0·10px␊

How to configure

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

{
  "SugarSS": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,12 +1,12 @@
 a␊
 ··color:·blue␊
 ␊
 .multiline,␊
-.selector␊
+.selector;color␊
 ··box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
 ··············1px·0·3px·rgba(0,·0,·0,·.6)␊
 ␊
 //·Mobile␊
 @media·(max-width:·400px)␊
-··.body␊
+··.body;␊
 ····padding:·0·10px␊

🔧 1

Using stylelint beautifier:

a␊
·color:·blue␊
␊
·.multiline,␊
·.selector;color␊
box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
·1px·0·3px·rgba(0,·0,·0,·.6)␊
␊
·//·Mobile␊
@media·(max-width:·400px)␊
·.body;␊
padding:·0·10px␊

How to configure

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

{
  "SugarSS": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,12 +1,12 @@
 a␊
-··color:·blue␊
+·color:·blue␊
 ␊
-.multiline,␊
-.selector␊
-··box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
-··············1px·0·3px·rgba(0,·0,·0,·.6)␊
+·.multiline,␊
+·.selector;color␊
+box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
+·1px·0·3px·rgba(0,·0,·0,·.6)␊
 ␊
-//·Mobile␊
+·//·Mobile␊
 @media·(max-width:·400px)␊
-··.body␊
-····padding:·0·10px␊
+·.body;␊
+padding:·0·10px␊

🔧 2

Using stylelint beautifier:

a␊
··color:·blue␊
␊
··.multiline,␊
··.selector;color␊
box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
··1px·0·3px·rgba(0,·0,·0,·.6)␊
␊
··//·Mobile␊
@media·(max-width:·400px)␊
··.body;␊
padding:·0·10px␊

How to configure

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

{
  "SugarSS": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,12 +1,12 @@
 a␊
 ··color:·blue␊
 ␊
-.multiline,␊
-.selector␊
-··box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
-··············1px·0·3px·rgba(0,·0,·0,·.6)␊
+··.multiline,␊
+··.selector;color␊
+box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
+··1px·0·3px·rgba(0,·0,·0,·.6)␊
 ␊
-//·Mobile␊
+··//·Mobile␊
 @media·(max-width:·400px)␊
-··.body␊
-····padding:·0·10px␊
+··.body;␊
+padding:·0·10px␊

🔧 3

Using stylelint beautifier:

a␊
···color:·blue␊
␊
···.multiline,␊
···.selector;color␊
box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
···1px·0·3px·rgba(0,·0,·0,·.6)␊
␊
···//·Mobile␊
@media·(max-width:·400px)␊
···.body;␊
padding:·0·10px␊

How to configure

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

{
  "SugarSS": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,12 +1,12 @@
 a␊
-··color:·blue␊
+···color:·blue␊
 ␊
-.multiline,␊
-.selector␊
-··box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
-··············1px·0·3px·rgba(0,·0,·0,·.6)␊
+···.multiline,␊
+···.selector;color␊
+box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
+···1px·0·3px·rgba(0,·0,·0,·.6)␊
 ␊
-//·Mobile␊
+···//·Mobile␊
 @media·(max-width:·400px)␊
-··.body␊
-····padding:·0·10px␊
+···.body;␊
+padding:·0·10px␊

🔧 4

Using stylelint beautifier:

a␊
····color:·blue␊
␊
····.multiline,␊
····.selector;color␊
box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
····1px·0·3px·rgba(0,·0,·0,·.6)␊
␊
····//·Mobile␊
@media·(max-width:·400px)␊
····.body;␊
padding:·0·10px␊

How to configure

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

{
  "SugarSS": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,12 +1,12 @@
 a␊
-··color:·blue␊
+····color:·blue␊
 ␊
-.multiline,␊
-.selector␊
-··box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
-··············1px·0·3px·rgba(0,·0,·0,·.6)␊
+····.multiline,␊
+····.selector;color␊
+box-shadow:·1px·0·9px·rgba(0,·0,·0,·.4),␊
+····1px·0·3px·rgba(0,·0,·0,·.6)␊
 ␊
-//·Mobile␊
+····//·Mobile␊
 @media·(max-width:·400px)␊
-··.body␊
-····padding:·0·10px␊
+····.body;␊
+padding:·0·10px␊

Add Swig Example

No example found. Please submit a Pull Request!

Edit Titanium Style Sheets Example

🚧 Original Code

//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
".container":·{␊
backgroundColor:"white"␊
},␊
//·This·is·applied·to·all·Labels·in·the·view␊
"Label":·{␊
width:·Ti.UI.SIZE,␊
height:·Ti.UI.SIZE,␊
color:·"#000",·//·black␊
transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file·····␊
},·␊
//·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
"#label":·{␊
color:·"#999"·/*·gray·*/␊
}␊

🔧 0

Using Pretty Diff beautifier:

·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
".container"·:·{␊
··backgroundColor:·"white"␊
},␊
//·This·is·applied·to·all·Labels·in·the·view␊
"Label"·:·{␊
··width:·Ti.UI.SIZE,␊
··height:·Ti.UI.SIZE,␊
··color:·"#000",·//·black␊
··transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
},␊
//·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
"#label"·:·{␊
··color:·"#999"/*·gray·*/␊
}␊

How to configure

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

{
  "Titanium Style Sheets": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,15 +1,15 @@
-//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
-".container":·{␊
-backgroundColor:"white"␊
+·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
+".container"·:·{␊
+··backgroundColor:·"white"␊
 },␊
 //·This·is·applied·to·all·Labels·in·the·view␊
-"Label":·{␊
-width:·Ti.UI.SIZE,␊
-height:·Ti.UI.SIZE,␊
-color:·"#000",·//·black␊
-transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file·····␊
-},·␊
+"Label"·:·{␊
+··width:·Ti.UI.SIZE,␊
+··height:·Ti.UI.SIZE,␊
+··color:·"#000",·//·black␊
+··transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
+},␊
 //·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
-"#label":·{␊
-color:·"#999"·/*·gray·*/␊
+"#label"·:·{␊
+··color:·"#999"/*·gray·*/␊
 }␊

🔧 1

Using Pretty Diff beautifier:

·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
".container"·:·{␊
·backgroundColor:·"white"␊
},␊
//·This·is·applied·to·all·Labels·in·the·view␊
"Label"·:·{␊
·width:·Ti.UI.SIZE,␊
·height:·Ti.UI.SIZE,␊
·color:·"#000",·//·black␊
·transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
},␊
//·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
"#label"·:·{␊
·color:·"#999"/*·gray·*/␊
}␊

How to configure

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

{
  "Titanium Style Sheets": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,15 +1,15 @@
-//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
-".container":·{␊
-backgroundColor:"white"␊
+·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
+".container"·:·{␊
+·backgroundColor:·"white"␊
 },␊
 //·This·is·applied·to·all·Labels·in·the·view␊
-"Label":·{␊
-width:·Ti.UI.SIZE,␊
-height:·Ti.UI.SIZE,␊
-color:·"#000",·//·black␊
-transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file·····␊
-},·␊
+"Label"·:·{␊
+·width:·Ti.UI.SIZE,␊
+·height:·Ti.UI.SIZE,␊
+·color:·"#000",·//·black␊
+·transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
+},␊
 //·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
-"#label":·{␊
-color:·"#999"·/*·gray·*/␊
+"#label"·:·{␊
+·color:·"#999"/*·gray·*/␊
 }␊

🔧 2

Using Pretty Diff beautifier:

·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
".container"·:·{␊
··backgroundColor:·"white"␊
},␊
//·This·is·applied·to·all·Labels·in·the·view␊
"Label"·:·{␊
··width:·Ti.UI.SIZE,␊
··height:·Ti.UI.SIZE,␊
··color:·"#000",·//·black␊
··transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
},␊
//·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
"#label"·:·{␊
··color:·"#999"/*·gray·*/␊
}␊

How to configure

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

{
  "Titanium Style Sheets": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,15 +1,15 @@
-//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
-".container":·{␊
-backgroundColor:"white"␊
+·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
+".container"·:·{␊
+··backgroundColor:·"white"␊
 },␊
 //·This·is·applied·to·all·Labels·in·the·view␊
-"Label":·{␊
-width:·Ti.UI.SIZE,␊
-height:·Ti.UI.SIZE,␊
-color:·"#000",·//·black␊
-transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file·····␊
-},·␊
+"Label"·:·{␊
+··width:·Ti.UI.SIZE,␊
+··height:·Ti.UI.SIZE,␊
+··color:·"#000",·//·black␊
+··transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
+},␊
 //·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
-"#label":·{␊
-color:·"#999"·/*·gray·*/␊
+"#label"·:·{␊
+··color:·"#999"/*·gray·*/␊
 }␊

🔧 3

Using Pretty Diff beautifier:

·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
".container"·:·{␊
···backgroundColor:·"white"␊
},␊
//·This·is·applied·to·all·Labels·in·the·view␊
"Label"·:·{␊
···width:·Ti.UI.SIZE,␊
···height:·Ti.UI.SIZE,␊
···color:·"#000",·//·black␊
···transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
},␊
//·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
"#label"·:·{␊
···color:·"#999"/*·gray·*/␊
}␊

How to configure

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

{
  "Titanium Style Sheets": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,15 +1,15 @@
-//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
-".container":·{␊
-backgroundColor:"white"␊
+·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
+".container"·:·{␊
+···backgroundColor:·"white"␊
 },␊
 //·This·is·applied·to·all·Labels·in·the·view␊
-"Label":·{␊
-width:·Ti.UI.SIZE,␊
-height:·Ti.UI.SIZE,␊
-color:·"#000",·//·black␊
-transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file·····␊
-},·␊
+"Label"·:·{␊
+···width:·Ti.UI.SIZE,␊
+···height:·Ti.UI.SIZE,␊
+···color:·"#000",·//·black␊
+···transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
+},␊
 //·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
-"#label":·{␊
-color:·"#999"·/*·gray·*/␊
+"#label"·:·{␊
+···color:·"#999"/*·gray·*/␊
 }␊

🔧 4

Using Pretty Diff beautifier:

·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
".container"·:·{␊
····backgroundColor:·"white"␊
},␊
//·This·is·applied·to·all·Labels·in·the·view␊
"Label"·:·{␊
····width:·Ti.UI.SIZE,␊
····height:·Ti.UI.SIZE,␊
····color:·"#000",·//·black␊
····transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
},␊
//·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
"#label"·:·{␊
····color:·"#999"/*·gray·*/␊
}␊

How to configure

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

{
  "Titanium Style Sheets": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,15 +1,15 @@
-//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
-".container":·{␊
-backgroundColor:"white"␊
+·//·This·is·applied·to·any·element·with·the·class·attribute·assigned·to·"container"␊
+".container"·:·{␊
+····backgroundColor:·"white"␊
 },␊
 //·This·is·applied·to·all·Labels·in·the·view␊
-"Label":·{␊
-width:·Ti.UI.SIZE,␊
-height:·Ti.UI.SIZE,␊
-color:·"#000",·//·black␊
-transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file·····␊
-},·␊
+"Label"·:·{␊
+····width:·Ti.UI.SIZE,␊
+····height:·Ti.UI.SIZE,␊
+····color:·"#000",·//·black␊
+····transform:·Alloy.Globals.rotateLeft·//·value·is·defined·in·the·alloy.js·file␊
+},␊
 //·This·is·only·applied·to·an·element·with·the·id·attribute·assigned·to·"label"␊
-"#label":·{␊
-color:·"#999"·/*·gray·*/␊
+"#label"·:·{␊
+····color:·"#999"/*·gray·*/␊
 }␊

Edit Twig Example

🚧 Original Code

{%·for·user·in·users·%}␊
*·{{·user.name·}}␊
{%·else·%}␊
No·users·have·been·found.␊
{%·endfor·%}␊

🔧 0

Using Pretty Diff beautifier:

{%·for·user·in·users·%}␊
··*␊
··{{·user.name·}}␊
{%·else·%}␊
··No·users·have·been·found.␊
{%·endfor·%}

How to configure

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

{
  "Twig": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,5 +1,6 @@
 {%·for·user·in·users·%}␊
-*·{{·user.name·}}␊
+··*␊
+··{{·user.name·}}␊
 {%·else·%}␊
-No·users·have·been·found.␊
-{%·endfor·%}␊
+··No·users·have·been·found.␊
+{%·endfor·%}
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

{%·for·user·in·users·%}␊
·*␊
·{{·user.name·}}␊
{%·else·%}␊
·No·users·have·been·found.␊
{%·endfor·%}

How to configure

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

{
  "Twig": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,5 +1,6 @@
 {%·for·user·in·users·%}␊
-*·{{·user.name·}}␊
+·*␊
+·{{·user.name·}}␊
 {%·else·%}␊
-No·users·have·been·found.␊
-{%·endfor·%}␊
+·No·users·have·been·found.␊
+{%·endfor·%}
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

{%·for·user·in·users·%}␊
··*␊
··{{·user.name·}}␊
{%·else·%}␊
··No·users·have·been·found.␊
{%·endfor·%}

How to configure

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

{
  "Twig": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,5 +1,6 @@
 {%·for·user·in·users·%}␊
-*·{{·user.name·}}␊
+··*␊
+··{{·user.name·}}␊
 {%·else·%}␊
-No·users·have·been·found.␊
-{%·endfor·%}␊
+··No·users·have·been·found.␊
+{%·endfor·%}
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

{%·for·user·in·users·%}␊
···*␊
···{{·user.name·}}␊
{%·else·%}␊
···No·users·have·been·found.␊
{%·endfor·%}

How to configure

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

{
  "Twig": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,5 +1,6 @@
 {%·for·user·in·users·%}␊
-*·{{·user.name·}}␊
+···*␊
+···{{·user.name·}}␊
 {%·else·%}␊
-No·users·have·been·found.␊
-{%·endfor·%}␊
+···No·users·have·been·found.␊
+{%·endfor·%}
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

{%·for·user·in·users·%}␊
····*␊
····{{·user.name·}}␊
{%·else·%}␊
····No·users·have·been·found.␊
{%·endfor·%}

How to configure

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

{
  "Twig": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,5 +1,6 @@
 {%·for·user·in·users·%}␊
-*·{{·user.name·}}␊
+····*␊
+····{{·user.name·}}␊
 {%·else·%}␊
-No·users·have·been·found.␊
-{%·endfor·%}␊
+····No·users·have·been·found.␊
+{%·endfor·%}
\ No newline at end of file

Edit TypeScript Example

🚧 Original Code

if·(a)·{␊
······b·=·c;␊
function·foo(d)·{␊
··········e·=·f;␊
··}␊
}␊
␊
if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
······e·=·f;␊
··}␊
}␊
␊
foo.bar.baz();␊

🔧 0

Using Prettier beautifier:

if·(a)·{␊
b·=·c;␊
function·foo(d)·{␊
e·=·f;␊
}␊
}␊
␊
if·(a)·{␊
b·=·c;␊
function·foo(d)·{␊
e·=·f;␊
}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "TypeScript": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
+b·=·c;␊
 function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+e·=·f;␊
 }␊
+}␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+b·=·c;␊
+function·foo(d)·{␊
+e·=·f;␊
 }␊
+}␊
 ␊
 foo.bar.baz();␊

🔧 1

Using Prettier beautifier:

if·(a)·{␊
·b·=·c;␊
·function·foo(d)·{␊
··e·=·f;␊
·}␊
}␊
␊
if·(a)·{␊
·b·=·c;␊
·function·foo(d)·{␊
··e·=·f;␊
·}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "TypeScript": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+·b·=·c;␊
+·function·foo(d)·{␊
+··e·=·f;␊
+·}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+·b·=·c;␊
+·function·foo(d)·{␊
+··e·=·f;␊
+·}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 2

Using Prettier beautifier:

if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
····e·=·f;␊
··}␊
}␊
␊
if·(a)·{␊
··b·=·c;␊
··function·foo(d)·{␊
····e·=·f;␊
··}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

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

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
+··b·=·c;␊
+··function·foo(d)·{␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 if·(a)·{␊
 ··b·=·c;␊
 ··function·foo(d)·{␊
-······e·=·f;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 3

Using Prettier beautifier:

if·(a)·{␊
···b·=·c;␊
···function·foo(d)·{␊
······e·=·f;␊
···}␊
}␊
␊
if·(a)·{␊
···b·=·c;␊
···function·foo(d)·{␊
······e·=·f;␊
···}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "TypeScript": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+···b·=·c;␊
+···function·foo(d)·{␊
+······e·=·f;␊
+···}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
+···b·=·c;␊
+···function·foo(d)·{␊
 ······e·=·f;␊
-··}␊
+···}␊
 }␊
 ␊
 foo.bar.baz();␊

🔧 4

Using Prettier beautifier:

if·(a)·{␊
····b·=·c;␊
····function·foo(d)·{␊
········e·=·f;␊
····}␊
}␊
␊
if·(a)·{␊
····b·=·c;␊
····function·foo(d)·{␊
········e·=·f;␊
····}␊
}␊
␊
foo.bar.baz();␊

How to configure

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

{
  "TypeScript": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,15 +1,15 @@
 if·(a)·{␊
-······b·=·c;␊
-function·foo(d)·{␊
-··········e·=·f;␊
-··}␊
+····b·=·c;␊
+····function·foo(d)·{␊
+········e·=·f;␊
+····}␊
 }␊
 ␊
 if·(a)·{␊
-··b·=·c;␊
-··function·foo(d)·{␊
-······e·=·f;␊
-··}␊
+····b·=·c;␊
+····function·foo(d)·{␊
+········e·=·f;␊
+····}␊
 }␊
 ␊
 foo.bar.baz();␊

Edit Visualforce Example

🚧 Original Code

<apex:page·standardController="Contact"·>␊
<apex:form·>␊
␊
<apex:pageBlock·title="Edit·Contact">␊
<apex:pageBlockSection·columns="1">␊
<apex:inputField·value="{!Contact.FirstName}"/>␊
<apex:inputField·value="{!Contact.LastName}"/>␊
<apex:inputField·value="{!Contact.Email}"/>␊
<apex:inputField·value="{!Contact.Birthdate}"/>␊
</apex:pageBlockSection>␊
<apex:pageBlockButtons·>␊
<apex:commandButton·action="{!save}"·value="Save"/>␊
</apex:pageBlockButtons>␊
</apex:pageBlock>␊
␊
</apex:form>␊
</apex:page>␊

🔧 0

Using Pretty Diff beautifier:

<apex:page·standardController="Contact">␊
··<apex:form·>␊
␊
····<apex:pageBlock·title="Edit·Contact">␊
······<apex:pageBlockSection·columns="1">␊
········<apex:inputField·value="{!Contact.FirstName}"/>␊
········<apex:inputField·value="{!Contact.LastName}"/>␊
········<apex:inputField·value="{!Contact.Email}"/>␊
········<apex:inputField·value="{!Contact.Birthdate}"/>␊
······</apex:pageBlockSection>␊
······<apex:pageBlockButtons·>␊
········<apex:commandButton·action="{!save}"·value="Save"/>␊
······</apex:pageBlockButtons>␊
····</apex:pageBlock>␊
␊
··</apex:form>␊
</apex:page>

How to configure

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

{
  "Visualforce": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,17 +1,17 @@
-<apex:page·standardController="Contact"·>␊
-<apex:form·>␊
+<apex:page·standardController="Contact">␊
+··<apex:form·>␊
 ␊
-<apex:pageBlock·title="Edit·Contact">␊
-<apex:pageBlockSection·columns="1">␊
-<apex:inputField·value="{!Contact.FirstName}"/>␊
-<apex:inputField·value="{!Contact.LastName}"/>␊
-<apex:inputField·value="{!Contact.Email}"/>␊
-<apex:inputField·value="{!Contact.Birthdate}"/>␊
-</apex:pageBlockSection>␊
-<apex:pageBlockButtons·>␊
-<apex:commandButton·action="{!save}"·value="Save"/>␊
-</apex:pageBlockButtons>␊
-</apex:pageBlock>␊
+····<apex:pageBlock·title="Edit·Contact">␊
+······<apex:pageBlockSection·columns="1">␊
+········<apex:inputField·value="{!Contact.FirstName}"/>␊
+········<apex:inputField·value="{!Contact.LastName}"/>␊
+········<apex:inputField·value="{!Contact.Email}"/>␊
+········<apex:inputField·value="{!Contact.Birthdate}"/>␊
+······</apex:pageBlockSection>␊
+······<apex:pageBlockButtons·>␊
+········<apex:commandButton·action="{!save}"·value="Save"/>␊
+······</apex:pageBlockButtons>␊
+····</apex:pageBlock>␊
 ␊
-</apex:form>␊
-</apex:page>␊
+··</apex:form>␊
+</apex:page>
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

<apex:page·standardController="Contact">␊
·<apex:form·>␊
␊
··<apex:pageBlock·title="Edit·Contact">␊
···<apex:pageBlockSection·columns="1">␊
····<apex:inputField·value="{!Contact.FirstName}"/>␊
····<apex:inputField·value="{!Contact.LastName}"/>␊
····<apex:inputField·value="{!Contact.Email}"/>␊
····<apex:inputField·value="{!Contact.Birthdate}"/>␊
···</apex:pageBlockSection>␊
···<apex:pageBlockButtons·>␊
····<apex:commandButton·action="{!save}"·value="Save"/>␊
···</apex:pageBlockButtons>␊
··</apex:pageBlock>␊
␊
·</apex:form>␊
</apex:page>

How to configure

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

{
  "Visualforce": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,17 +1,17 @@
-<apex:page·standardController="Contact"·>␊
-<apex:form·>␊
+<apex:page·standardController="Contact">␊
+·<apex:form·>␊
 ␊
-<apex:pageBlock·title="Edit·Contact">␊
-<apex:pageBlockSection·columns="1">␊
-<apex:inputField·value="{!Contact.FirstName}"/>␊
-<apex:inputField·value="{!Contact.LastName}"/>␊
-<apex:inputField·value="{!Contact.Email}"/>␊
-<apex:inputField·value="{!Contact.Birthdate}"/>␊
-</apex:pageBlockSection>␊
-<apex:pageBlockButtons·>␊
-<apex:commandButton·action="{!save}"·value="Save"/>␊
-</apex:pageBlockButtons>␊
-</apex:pageBlock>␊
+··<apex:pageBlock·title="Edit·Contact">␊
+···<apex:pageBlockSection·columns="1">␊
+····<apex:inputField·value="{!Contact.FirstName}"/>␊
+····<apex:inputField·value="{!Contact.LastName}"/>␊
+····<apex:inputField·value="{!Contact.Email}"/>␊
+····<apex:inputField·value="{!Contact.Birthdate}"/>␊
+···</apex:pageBlockSection>␊
+···<apex:pageBlockButtons·>␊
+····<apex:commandButton·action="{!save}"·value="Save"/>␊
+···</apex:pageBlockButtons>␊
+··</apex:pageBlock>␊
 ␊
-</apex:form>␊
-</apex:page>␊
+·</apex:form>␊
+</apex:page>
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

<apex:page·standardController="Contact">␊
··<apex:form·>␊
␊
····<apex:pageBlock·title="Edit·Contact">␊
······<apex:pageBlockSection·columns="1">␊
········<apex:inputField·value="{!Contact.FirstName}"/>␊
········<apex:inputField·value="{!Contact.LastName}"/>␊
········<apex:inputField·value="{!Contact.Email}"/>␊
········<apex:inputField·value="{!Contact.Birthdate}"/>␊
······</apex:pageBlockSection>␊
······<apex:pageBlockButtons·>␊
········<apex:commandButton·action="{!save}"·value="Save"/>␊
······</apex:pageBlockButtons>␊
····</apex:pageBlock>␊
␊
··</apex:form>␊
</apex:page>

How to configure

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

{
  "Visualforce": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,17 +1,17 @@
-<apex:page·standardController="Contact"·>␊
-<apex:form·>␊
+<apex:page·standardController="Contact">␊
+··<apex:form·>␊
 ␊
-<apex:pageBlock·title="Edit·Contact">␊
-<apex:pageBlockSection·columns="1">␊
-<apex:inputField·value="{!Contact.FirstName}"/>␊
-<apex:inputField·value="{!Contact.LastName}"/>␊
-<apex:inputField·value="{!Contact.Email}"/>␊
-<apex:inputField·value="{!Contact.Birthdate}"/>␊
-</apex:pageBlockSection>␊
-<apex:pageBlockButtons·>␊
-<apex:commandButton·action="{!save}"·value="Save"/>␊
-</apex:pageBlockButtons>␊
-</apex:pageBlock>␊
+····<apex:pageBlock·title="Edit·Contact">␊
+······<apex:pageBlockSection·columns="1">␊
+········<apex:inputField·value="{!Contact.FirstName}"/>␊
+········<apex:inputField·value="{!Contact.LastName}"/>␊
+········<apex:inputField·value="{!Contact.Email}"/>␊
+········<apex:inputField·value="{!Contact.Birthdate}"/>␊
+······</apex:pageBlockSection>␊
+······<apex:pageBlockButtons·>␊
+········<apex:commandButton·action="{!save}"·value="Save"/>␊
+······</apex:pageBlockButtons>␊
+····</apex:pageBlock>␊
 ␊
-</apex:form>␊
-</apex:page>␊
+··</apex:form>␊
+</apex:page>
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

<apex:page·standardController="Contact">␊
···<apex:form·>␊
␊
······<apex:pageBlock·title="Edit·Contact">␊
·········<apex:pageBlockSection·columns="1">␊
············<apex:inputField·value="{!Contact.FirstName}"/>␊
············<apex:inputField·value="{!Contact.LastName}"/>␊
············<apex:inputField·value="{!Contact.Email}"/>␊
············<apex:inputField·value="{!Contact.Birthdate}"/>␊
·········</apex:pageBlockSection>␊
·········<apex:pageBlockButtons·>␊
············<apex:commandButton·action="{!save}"·value="Save"/>␊
·········</apex:pageBlockButtons>␊
······</apex:pageBlock>␊
␊
···</apex:form>␊
</apex:page>

How to configure

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

{
  "Visualforce": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,17 +1,17 @@
-<apex:page·standardController="Contact"·>␊
-<apex:form·>␊
+<apex:page·standardController="Contact">␊
+···<apex:form·>␊
 ␊
-<apex:pageBlock·title="Edit·Contact">␊
-<apex:pageBlockSection·columns="1">␊
-<apex:inputField·value="{!Contact.FirstName}"/>␊
-<apex:inputField·value="{!Contact.LastName}"/>␊
-<apex:inputField·value="{!Contact.Email}"/>␊
-<apex:inputField·value="{!Contact.Birthdate}"/>␊
-</apex:pageBlockSection>␊
-<apex:pageBlockButtons·>␊
-<apex:commandButton·action="{!save}"·value="Save"/>␊
-</apex:pageBlockButtons>␊
-</apex:pageBlock>␊
+······<apex:pageBlock·title="Edit·Contact">␊
+·········<apex:pageBlockSection·columns="1">␊
+············<apex:inputField·value="{!Contact.FirstName}"/>␊
+············<apex:inputField·value="{!Contact.LastName}"/>␊
+············<apex:inputField·value="{!Contact.Email}"/>␊
+············<apex:inputField·value="{!Contact.Birthdate}"/>␊
+·········</apex:pageBlockSection>␊
+·········<apex:pageBlockButtons·>␊
+············<apex:commandButton·action="{!save}"·value="Save"/>␊
+·········</apex:pageBlockButtons>␊
+······</apex:pageBlock>␊
 ␊
-</apex:form>␊
-</apex:page>␊
+···</apex:form>␊
+</apex:page>
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

<apex:page·standardController="Contact">␊
····<apex:form·>␊
␊
········<apex:pageBlock·title="Edit·Contact">␊
············<apex:pageBlockSection·columns="1">␊
················<apex:inputField·value="{!Contact.FirstName}"/>␊
················<apex:inputField·value="{!Contact.LastName}"/>␊
················<apex:inputField·value="{!Contact.Email}"/>␊
················<apex:inputField·value="{!Contact.Birthdate}"/>␊
············</apex:pageBlockSection>␊
············<apex:pageBlockButtons·>␊
················<apex:commandButton·action="{!save}"·value="Save"/>␊
············</apex:pageBlockButtons>␊
········</apex:pageBlock>␊
␊
····</apex:form>␊
</apex:page>

How to configure

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

{
  "Visualforce": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,17 +1,17 @@
-<apex:page·standardController="Contact"·>␊
-<apex:form·>␊
+<apex:page·standardController="Contact">␊
+····<apex:form·>␊
 ␊
-<apex:pageBlock·title="Edit·Contact">␊
-<apex:pageBlockSection·columns="1">␊
-<apex:inputField·value="{!Contact.FirstName}"/>␊
-<apex:inputField·value="{!Contact.LastName}"/>␊
-<apex:inputField·value="{!Contact.Email}"/>␊
-<apex:inputField·value="{!Contact.Birthdate}"/>␊
-</apex:pageBlockSection>␊
-<apex:pageBlockButtons·>␊
-<apex:commandButton·action="{!save}"·value="Save"/>␊
-</apex:pageBlockButtons>␊
-</apex:pageBlock>␊
+········<apex:pageBlock·title="Edit·Contact">␊
+············<apex:pageBlockSection·columns="1">␊
+················<apex:inputField·value="{!Contact.FirstName}"/>␊
+················<apex:inputField·value="{!Contact.LastName}"/>␊
+················<apex:inputField·value="{!Contact.Email}"/>␊
+················<apex:inputField·value="{!Contact.Birthdate}"/>␊
+············</apex:pageBlockSection>␊
+············<apex:pageBlockButtons·>␊
+················<apex:commandButton·action="{!save}"·value="Save"/>␊
+············</apex:pageBlockButtons>␊
+········</apex:pageBlock>␊
 ␊
-</apex:form>␊
-</apex:page>␊
+····</apex:form>␊
+</apex:page>
\ No newline at end of file

Edit Vue Example

🚧 Original Code

<template·>␊
<h1·>{{greeting}}·····world</h1·>␊
<script>kikoo·(·)·</script>␊
</template·>␊
␊
<script>␊
module··.··exports··=␊
{data·:·function·()·{return·{␊
greeting:·"Hello"␊
}}␊
}␊
</script>␊
␊
<style···scoped·>␊
p·{·font-size·:·2em·;·text-align·:·center·;·}␊
</style·>··

🔧 0

Using Prettier beautifier:

<template>␊
<h1>{{·greeting·}}·world</h1>␊
<script>␊
kikoo();␊
</script>␊
</template>␊
␊
<script>␊
module.exports·=·{␊
data:·function()·{␊
return·{␊
greeting:·"Hello"␊
};␊
}␊
};␊
</script>␊
␊
<style·scoped>␊
p·{␊
font-size:·2em;␊
text-align:·center;␊
}␊
</style>␊

How to configure

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

{
  "Vue": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,16 +1,23 @@
-<template·>␊
-<h1·>{{greeting}}·····world</h1·>␊
-<script>kikoo·(·)·</script>␊
-</template·>␊
+<template>␊
+<h1>{{·greeting·}}·world</h1>␊
+<script>␊
+kikoo();␊
+</script>␊
+</template>␊
 ␊
 <script>␊
-module··.··exports··=␊
-{data·:·function·()·{return·{␊
+module.exports·=·{␊
+data:·function()·{␊
\ No newline at end of file
+return·{␊
 greeting:·"Hello"␊
-}}␊
+};␊
 }␊
+};␊
 </script>␊
 ␊
-<style···scoped·>␊
-p·{·font-size·:·2em·;·text-align·:·center·;·}␊
-</style·>··
+<style·scoped>␊
+p·{␊
+font-size:·2em;␊
+text-align:·center;␊
+}␊
+</style>␊

🔧 1

Using Prettier beautifier:

<template>␊
·<h1>{{·greeting·}}·world</h1>␊
·<script>␊
··kikoo();␊
·</script>␊
</template>␊
␊
<script>␊
module.exports·=·{␊
·data:·function()·{␊
··return·{␊
···greeting:·"Hello"␊
··};␊
·}␊
};␊
</script>␊
␊
<style·scoped>␊
p·{␊
·font-size:·2em;␊
·text-align:·center;␊
}␊
</style>␊

How to configure

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

{
  "Vue": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,16 +1,23 @@
-<template·>␊
-<h1·>{{greeting}}·····world</h1·>␊
-<script>kikoo·(·)·</script>␊
-</template·>␊
+<template>␊
+·<h1>{{·greeting·}}·world</h1>␊
+·<script>␊
+··kikoo();␊
+·</script>␊
+</template>␊
 ␊
 <script>␊
-module··.··exports··=␊
-{data·:·function·()·{return·{␊
-greeting:·"Hello"␊
-}}␊
\ No newline at end of file
-}␊
+module.exports·=·{␊
+·data:·function()·{␊
+··return·{␊
+···greeting:·"Hello"␊
+··};␊
+·}␊
+};␊
 </script>␊
 ␊
-<style···scoped·>␊
-p·{·font-size·:·2em·;·text-align·:·center·;·}␊
-</style·>··
+<style·scoped>␊
+p·{␊
+·font-size:·2em;␊
+·text-align:·center;␊
+}␊
+</style>␊

🔧 2

Using Prettier beautifier:

<template>␊
··<h1>{{·greeting·}}·world</h1>␊
··<script>␊
····kikoo();␊
··</script>␊
</template>␊
␊
<script>␊
module.exports·=·{␊
··data:·function()·{␊
····return·{␊
······greeting:·"Hello"␊
····};␊
··}␊
};␊
</script>␊
␊
<style·scoped>␊
p·{␊
··font-size:·2em;␊
··text-align:·center;␊
}␊
</style>␊

How to configure

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

{
  "Vue": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,16 +1,23 @@
-<template·>␊
-<h1·>{{greeting}}·····world</h1·>␊
-<script>kikoo·(·)·</script>␊
-</template·>␊
+<template>␊
+··<h1>{{·greeting·}}·world</h1>␊
+··<script>␊
+····kikoo();␊
+··</script>␊
+</template>␊
 ␊
 <script>␊
-module··.··exports··=␊
-{data·:·function·()·{return·{␊
-greeting:·"Hello"␊
-}}␊
\ No newline at end of file
-}␊
+module.exports·=·{␊
+··data:·function()·{␊
+····return·{␊
+······greeting:·"Hello"␊
+····};␊
+··}␊
+};␊
 </script>␊
 ␊
-<style···scoped·>␊
-p·{·font-size·:·2em·;·text-align·:·center·;·}␊
-</style·>··
+<style·scoped>␊
+p·{␊
+··font-size:·2em;␊
+··text-align:·center;␊
+}␊
+</style>␊

🔧 3

Using Prettier beautifier:

<template>␊
···<h1>{{·greeting·}}·world</h1>␊
···<script>␊
······kikoo();␊
···</script>␊
</template>␊
␊
<script>␊
module.exports·=·{␊
···data:·function()·{␊
······return·{␊
·········greeting:·"Hello"␊
······};␊
···}␊
};␊
</script>␊
␊
<style·scoped>␊
p·{␊
···font-size:·2em;␊
···text-align:·center;␊
}␊
</style>␊

How to configure

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

{
  "Vue": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,16 +1,23 @@
-<template·>␊
-<h1·>{{greeting}}·····world</h1·>␊
-<script>kikoo·(·)·</script>␊
-</template·>␊
+<template>␊
+···<h1>{{·greeting·}}·world</h1>␊
+···<script>␊
+······kikoo();␊
+···</script>␊
+</template>␊
 ␊
 <script>␊
-module··.··exports··=␊
-{data·:·function·()·{return·{␊
-greeting:·"Hello"␊
-}}␊
\ No newline at end of file
-}␊
+module.exports·=·{␊
+···data:·function()·{␊
+······return·{␊
+·········greeting:·"Hello"␊
+······};␊
+···}␊
+};␊
 </script>␊
 ␊
-<style···scoped·>␊
-p·{·font-size·:·2em·;·text-align·:·center·;·}␊
-</style·>··
+<style·scoped>␊
+p·{␊
+···font-size:·2em;␊
+···text-align:·center;␊
+}␊
+</style>␊

🔧 4

Using Prettier beautifier:

<template>␊
····<h1>{{·greeting·}}·world</h1>␊
····<script>␊
········kikoo();␊
····</script>␊
</template>␊
␊
<script>␊
module.exports·=·{␊
····data:·function()·{␊
········return·{␊
············greeting:·"Hello"␊
········};␊
····}␊
};␊
</script>␊
␊
<style·scoped>␊
p·{␊
····font-size:·2em;␊
····text-align:·center;␊
}␊
</style>␊

How to configure

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

{
  "Vue": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,16 +1,23 @@
-<template·>␊
-<h1·>{{greeting}}·····world</h1·>␊
-<script>kikoo·(·)·</script>␊
-</template·>␊
+<template>␊
+····<h1>{{·greeting·}}·world</h1>␊
+····<script>␊
+········kikoo();␊
+····</script>␊
+</template>␊
 ␊
 <script>␊
-module··.··exports··=␊
-{data·:·function·()·{return·{␊
-greeting:·"Hello"␊
-}}␊
\ No newline at end of file
-}␊
+module.exports·=·{␊
+····data:·function()·{␊
+········return·{␊
+············greeting:·"Hello"␊
+········};␊
+····}␊
+};␊
 </script>␊
 ␊
-<style···scoped·>␊
-p·{·font-size·:·2em·;·text-align·:·center·;·}␊
-</style·>··
+<style·scoped>␊
+p·{␊
+····font-size:·2em;␊
+····text-align:·center;␊
+}␊
+</style>␊

Edit XML Example

🚧 Original Code

<breakfast_menu>␊
<food>␊
<name>Belgian·Waffles</name>␊
<price>$5.95</price>␊
<description>␊
Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
</description>␊
<calories>650</calories>␊
</food>␊
<food>␊
<name>Strawberry·Belgian·Waffles</name>␊
<price>$7.95</price>␊
<description>␊
Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
</description>␊
<calories>900</calories>␊
</food>␊
</breakfast_menu>

🔧 0

Using JS-Beautify beautifier:

<breakfast_menu>␊
<food>␊
<name>Belgian·Waffles</name>␊
<price>$5.95</price>␊
<description>␊
Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
</description>␊
<calories>650</calories>␊
</food>␊
<food>␊
<name>Strawberry·Belgian·Waffles</name>␊
<price>$7.95</price>␊
<description>␊
Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
</description>␊
<calories>900</calories>␊
</food>␊
</breakfast_menu>

How to configure

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

{
  "XML": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified

🔧 1

Using JS-Beautify beautifier:

<breakfast_menu>␊
·<food>␊
··<name>Belgian·Waffles</name>␊
··<price>$5.95</price>␊
··<description>␊
···Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
··</description>␊
··<calories>650</calories>␊
·</food>␊
·<food>␊
··<name>Strawberry·Belgian·Waffles</name>␊
··<price>$7.95</price>␊
··<description>␊
···Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
··</description>␊
··<calories>900</calories>␊
·</food>␊
</breakfast_menu>

How to configure

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

{
  "XML": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,18 +1,18 @@
 <breakfast_menu>␊
-<food>␊
-<name>Belgian·Waffles</name>␊
-<price>$5.95</price>␊
-<description>␊
-Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
-</description>␊
-<calories>650</calories>␊
-</food>␊
-<food>␊
-<name>Strawberry·Belgian·Waffles</name>␊
-<price>$7.95</price>␊
-<description>␊
-Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
-</description>␊
-<calories>900</calories>␊
-</food>␊
+·<food>␊
+··<name>Belgian·Waffles</name>␊
+··<price>$5.95</price>␊
+··<description>␊
+···Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
+··</description>␊
+··<calories>650</calories>␊
+·</food>␊
+·<food>␊
+··<name>Strawberry·Belgian·Waffles</name>␊
+··<price>$7.95</price>␊
+··<description>␊
+···Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
+··</description>␊
+··<calories>900</calories>␊
+·</food>␊
 </breakfast_menu>
\ No newline at end of file

🔧 2

Using JS-Beautify beautifier:

<breakfast_menu>␊
··<food>␊
····<name>Belgian·Waffles</name>␊
····<price>$5.95</price>␊
····<description>␊
······Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
····</description>␊
····<calories>650</calories>␊
··</food>␊
··<food>␊
····<name>Strawberry·Belgian·Waffles</name>␊
····<price>$7.95</price>␊
····<description>␊
······Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
····</description>␊
····<calories>900</calories>␊
··</food>␊
</breakfast_menu>

How to configure

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

{
  "XML": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,18 +1,18 @@
 <breakfast_menu>␊
-<food>␊
-<name>Belgian·Waffles</name>␊
-<price>$5.95</price>␊
-<description>␊
-Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
-</description>␊
-<calories>650</calories>␊
-</food>␊
-<food>␊
-<name>Strawberry·Belgian·Waffles</name>␊
-<price>$7.95</price>␊
-<description>␊
-Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
-</description>␊
-<calories>900</calories>␊
-</food>␊
+··<food>␊
+····<name>Belgian·Waffles</name>␊
+····<price>$5.95</price>␊
+····<description>␊
+······Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
+····</description>␊
+····<calories>650</calories>␊
+··</food>␊
+··<food>␊
+····<name>Strawberry·Belgian·Waffles</name>␊
+····<price>$7.95</price>␊
+····<description>␊
+······Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
+····</description>␊
+····<calories>900</calories>␊
+··</food>␊
 </breakfast_menu>
\ No newline at end of file

🔧 3

Using JS-Beautify beautifier:

<breakfast_menu>␊
···<food>␊
······<name>Belgian·Waffles</name>␊
······<price>$5.95</price>␊
······<description>␊
·········Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
······</description>␊
······<calories>650</calories>␊
···</food>␊
···<food>␊
······<name>Strawberry·Belgian·Waffles</name>␊
······<price>$7.95</price>␊
······<description>␊
·········Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
······</description>␊
······<calories>900</calories>␊
···</food>␊
</breakfast_menu>

How to configure

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

{
  "XML": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,18 +1,18 @@
 <breakfast_menu>␊
-<food>␊
-<name>Belgian·Waffles</name>␊
-<price>$5.95</price>␊
-<description>␊
-Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
-</description>␊
-<calories>650</calories>␊
-</food>␊
-<food>␊
-<name>Strawberry·Belgian·Waffles</name>␊
-<price>$7.95</price>␊
-<description>␊
-Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
-</description>␊
-<calories>900</calories>␊
-</food>␊
+···<food>␊
+······<name>Belgian·Waffles</name>␊
+······<price>$5.95</price>␊
+······<description>␊
+·········Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
+······</description>␊
+······<calories>650</calories>␊
+···</food>␊
+···<food>␊
+······<name>Strawberry·Belgian·Waffles</name>␊
+······<price>$7.95</price>␊
+······<description>␊
+·········Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
+······</description>␊
+······<calories>900</calories>␊
+···</food>␊
 </breakfast_menu>
\ No newline at end of file

🔧 4

Using JS-Beautify beautifier:

<breakfast_menu>␊
····<food>␊
········<name>Belgian·Waffles</name>␊
········<price>$5.95</price>␊
········<description>␊
············Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
········</description>␊
········<calories>650</calories>␊
····</food>␊
····<food>␊
········<name>Strawberry·Belgian·Waffles</name>␊
········<price>$7.95</price>␊
········<description>␊
············Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
········</description>␊
········<calories>900</calories>␊
····</food>␊
</breakfast_menu>

How to configure

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

{
  "XML": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,18 +1,18 @@
 <breakfast_menu>␊
-<food>␊
-<name>Belgian·Waffles</name>␊
-<price>$5.95</price>␊
-<description>␊
-Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
-</description>␊
-<calories>650</calories>␊
-</food>␊
-<food>␊
-<name>Strawberry·Belgian·Waffles</name>␊
-<price>$7.95</price>␊
-<description>␊
-Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
-</description>␊
-<calories>900</calories>␊
-</food>␊
+····<food>␊
+········<name>Belgian·Waffles</name>␊
+········<price>$5.95</price>␊
+········<description>␊
+············Two·of·our·famous·Belgian·Waffles·with·plenty·of·real·maple·syrup␊
+········</description>␊
+········<calories>650</calories>␊
+····</food>␊
+····<food>␊
+········<name>Strawberry·Belgian·Waffles</name>␊
+········<price>$7.95</price>␊
+········<description>␊
+············Light·Belgian·waffles·covered·with·strawberries·and·whipped·cream␊
+········</description>␊
+········<calories>900</calories>␊
+····</food>␊
 </breakfast_menu>
\ No newline at end of file

Edit XTemplate Example

🚧 Original Code

{{#if(·x===1·)}}␊
1␊
{{elseif·(x===2)}}␊
2␊
{{else}}␊
3␊
{{/if}}␊
␊
{{#if·(·(x+1)·>·2·)}}␊
{{/if}}␊

🔧 0

Using Pretty Diff beautifier:

{{#if(·x===1·)}}␊
··1␊
{{elseif·(x===2)}}␊
··2␊
{{else}}␊
··3␊
{{/if}}␊
␊
{{#if·(·(x+1)·>·2·)}}{{/if}}

How to configure

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

{
  "XTemplate": {
    "indent_size": 0,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 0
===================================================================
--- 0   Original
+++ 0   Beautified
@@ -1,10 +1,9 @@
 {{#if(·x===1·)}}␊
-1␊
+··1␊
 {{elseif·(x===2)}}␊
-2␊
+··2␊
 {{else}}␊
-3␊
+··3␊
 {{/if}}␊
 ␊
-{{#if·(·(x+1)·>·2·)}}␊
-{{/if}}␊
+{{#if·(·(x+1)·>·2·)}}{{/if}}
\ No newline at end of file

🔧 1

Using Pretty Diff beautifier:

{{#if(·x===1·)}}␊
·1␊
{{elseif·(x===2)}}␊
·2␊
{{else}}␊
·3␊
{{/if}}␊
␊
{{#if·(·(x+1)·>·2·)}}{{/if}}

How to configure

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

{
  "XTemplate": {
    "indent_size": 1,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 1
===================================================================
--- 1   Original
+++ 1   Beautified
@@ -1,10 +1,9 @@
 {{#if(·x===1·)}}␊
-1␊
+·1␊
 {{elseif·(x===2)}}␊
-2␊
+·2␊
 {{else}}␊
-3␊
+·3␊
 {{/if}}␊
 ␊
-{{#if·(·(x+1)·>·2·)}}␊
-{{/if}}␊
+{{#if·(·(x+1)·>·2·)}}{{/if}}
\ No newline at end of file

🔧 2

Using Pretty Diff beautifier:

{{#if(·x===1·)}}␊
··1␊
{{elseif·(x===2)}}␊
··2␊
{{else}}␊
··3␊
{{/if}}␊
␊
{{#if·(·(x+1)·>·2·)}}{{/if}}

How to configure

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

{
  "XTemplate": {
    "indent_size": 2,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 2
===================================================================
--- 2   Original
+++ 2   Beautified
@@ -1,10 +1,9 @@
 {{#if(·x===1·)}}␊
-1␊
+··1␊
 {{elseif·(x===2)}}␊
-2␊
+··2␊
 {{else}}␊
-3␊
+··3␊
 {{/if}}␊
 ␊
-{{#if·(·(x+1)·>·2·)}}␊
-{{/if}}␊
+{{#if·(·(x+1)·>·2·)}}{{/if}}
\ No newline at end of file

🔧 3

Using Pretty Diff beautifier:

{{#if(·x===1·)}}␊
···1␊
{{elseif·(x===2)}}␊
···2␊
{{else}}␊
···3␊
{{/if}}␊
␊
{{#if·(·(x+1)·>·2·)}}{{/if}}

How to configure

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

{
  "XTemplate": {
    "indent_size": 3,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 3
===================================================================
--- 3   Original
+++ 3   Beautified
@@ -1,10 +1,9 @@
 {{#if(·x===1·)}}␊
-1␊
+···1␊
 {{elseif·(x===2)}}␊
-2␊
+···2␊
 {{else}}␊
-3␊
+···3␊
 {{/if}}␊
 ␊
-{{#if·(·(x+1)·>·2·)}}␊
-{{/if}}␊
+{{#if·(·(x+1)·>·2·)}}{{/if}}
\ No newline at end of file

🔧 4

Using Pretty Diff beautifier:

{{#if(·x===1·)}}␊
····1␊
{{elseif·(x===2)}}␊
····2␊
{{else}}␊
····3␊
{{/if}}␊
␊
{{#if·(·(x+1)·>·2·)}}{{/if}}

How to configure

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

{
  "XTemplate": {
    "indent_size": 4,
    "indent_char": " ",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: 4
===================================================================
--- 4   Original
+++ 4   Beautified
@@ -1,10 +1,9 @@
 {{#if(·x===1·)}}␊
-1␊
+····1␊
 {{elseif·(x===2)}}␊
-2␊
+····2␊
 {{else}}␊
-3␊
+····3␊
 {{/if}}␊
 ␊
-{{#if·(·(x+1)·>·2·)}}␊
-{{/if}}␊
+{{#if·(·(x+1)·>·2·)}}{{/if}}
\ No newline at end of file