Indent Style · Unibeautify

Config Key: indent_style

Description: Indentation style

Available since version: 0.8.0 (Current: )

Type: string

Default: "space"

Allowed values: "space" or "tab"

Support

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

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

Comparison Table

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

Examples

Select Language:

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!");␊
}␊
}

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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;␊
}␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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>␊
<%·}·%>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

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

Edit GraphQL Example

🚧 Original Code

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

🔧 "space"

Using Prettier beautifier:

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

How to configure

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

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

Difference from original

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

🔧 "tab"

Using Prettier beautifier:

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

How to configure

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

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

Difference from original

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

Edit HTML Example

🚧 Original Code

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

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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·%>

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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"␊
}

🔧 "space"

Using Prettier beautifier:

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

How to configure

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

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

Difference from original

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

🔧 "tab"

Using Prettier beautifier:

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

How to configure

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

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

Difference from original

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

Edit JSON5 Example

🚧 Original Code

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

🔧 "space"

Using Prettier beautifier:

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

How to configure

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

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

Difference from original

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

🔧 "tab"

Using Prettier beautifier:

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

How to configure

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

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

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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()

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   Beautified
@@ -1,17 +1,15 @@
 if·(a)·{␊
-·····b=c;␊
-function·foo(d)·{␊
-···········e=f;␊
-·}␊
+··b·=·c;␊
+··function·foo(d)·{␊
+····e·=·f;␊
+··}␊
 }␊
 ␊
 if·(a)·{␊
-··b=c;␊
+··b·=·c;␊
 ··function·foo(d)·{␊
-····e=f;␊
+····e·=·f;␊
\ No newline at end of file
 ··}␊
 }␊
 ␊
-foo␊
-.bar␊
-.baz()
+foo.bar.baz();␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab Beautified
@@ -1,17 +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;␊
\ No newline at end of file
+⇥  function·foo(d)·{␊
+⇥  ⇥   e·=·f;␊
+⇥  }␊
 }␊
 ␊
-foo␊
-.bar␊
-.baz()
+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");␊
····}␊
␊
}␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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");␊
+··}␊
 ␊
 }␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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");␊
+⇥  ⇥   }␊
 ␊
 }␊

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()

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   Beautified
@@ -1,17 +1,15 @@
 if·(a)·{␊
-·····b=c;␊
-function·foo(d)·{␊
-···········e=f;␊
-·}␊
+··b·=·c;␊
+··function·foo(d)·{␊
+····e·=·f;␊
+··}␊
 }␊
 ␊
 if·(a)·{␊
-··b=c;␊
+··b·=·c;␊
 ··function·foo(d)·{␊
-····e=f;␊
+····e·=·f;␊
\ No newline at end of file
 ··}␊
 }␊
 ␊
-foo␊
-.bar␊
-.baz()
+foo.bar.baz();␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab Beautified
@@ -1,17 +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;␊
\ No newline at end of file
+⇥  function·foo(d)·{␊
+⇥  ⇥   e·=·f;␊
+⇥  }␊
 }␊
 ␊
-foo␊
-.bar␊
-.baz()
+foo.bar.baz();␊

Edit Less Example

🚧 Original Code

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

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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]␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "YAPF"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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]␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "YAPF"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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;␊
··}␊
}

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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;␊
 ··}␊
-}
+}␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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 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>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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␊

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·*/␊
}␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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·*/␊
 }␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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·%}␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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()

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   Beautified
@@ -1,17 +1,15 @@
 if·(a)·{␊
-·····b=c;␊
-function·foo(d)·{␊
-···········e=f;␊
-·}␊
+··b·=·c;␊
+··function·foo(d)·{␊
+····e·=·f;␊
+··}␊
 }␊
 ␊
 if·(a)·{␊
-··b=c;␊
+··b·=·c;␊
 ··function·foo(d)·{␊
-····e=f;␊
+····e·=·f;␊
\ No newline at end of file
 ··}␊
 }␊
 ␊
-foo␊
-.bar␊
-.baz()
+foo.bar.baz();␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab Beautified
@@ -1,17 +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;␊
\ No newline at end of file
+⇥  function·foo(d)·{␊
+⇥  ⇥   e·=·f;␊
+⇥  }␊
 }␊
 ␊
-foo␊
-.bar␊
-.baz()
+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>␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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·>··

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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>␊

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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>

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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}}␊

🔧 "space"

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": " ",
    "indent_style": "space",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: space
===================================================================
--- space   Original
+++ space   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

🔧 "tab"

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": " ",
    "indent_style": "tab",
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: tab
===================================================================
--- tab Original
+++ tab 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