Unibeautify
  • Install
  • Docs
  • Assistant
  • Playground
  • GitHub

›I

A

  • Align Assignments
  • Arrow Parens

B

  • Brace Style
  • Break Chained Methods

C

  • Comma First

E

  • End With Comma
  • End With Newline
  • End With Semicolon

F

  • Force Indentation

I

  • Identifier Case
  • Indent Chained Methods
  • Indent Comments
  • Indent Inner Html
  • Indent Scripts
  • Indent Size
  • Indent Style

J

  • JSLint Happy
  • JSX Brackets

K

  • Keep Array Indentation
  • Keyword Case

M

  • Max Preserve Newlines
  • Multiline Ternary

N

  • Newline Before Tags
  • Newline Between Rules
  • No Leading Zero

O

  • Object Curly Spacing

P

  • Pragma Insert
  • Pragma Require
  • Preserve Newlines

Q

  • Quotes

R

  • Remove Trailing Whitespace

S

  • Selector Separator Newline
  • Space After Anon Function
  • Space Before Conditional
  • Space In Empty Paren
  • Space In Paren

U

  • Unescape Strings
  • Unformatted

W

  • Wrap Attributes
  • Wrap Attributes Indent Size
  • Wrap Line Length
  • Wrap Prose
Edit

Indent Comments

Config Key: indent_comments

Description: Determines whether comments should be indented.

Available since version: 0.7.0 (Current: npm)

Type: boolean

Default: true

Support

Edit Beautifiers

Languages: C#, ColdFusion, EJS, HTML, HTML+ERB, Handlebars, JSON5, JSX, Java, JavaScript, Riot, SVG, Spacebars, Swig, Twig, TypeScript, Visualforce, XML, XTemplate

Beautifiers: Pretty Diff

Comparison Table

LanguagePretty Diff
C#✅
ColdFusion✅
EJS✅
HTML✅
HTML+ERB✅
Handlebars✅
JSON5✅
JSX✅
Java✅
JavaScript✅
Riot✅
SVG✅
Spacebars✅
Swig✅
Twig✅
TypeScript✅
Visualforce✅
XML✅
XTemplate✅

Examples

Invisible characters are shown with the following symbols:

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

Edit C# Example

🚧 Original Code

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

🔧 true

Using Pretty Diff beautifier:

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

How to configure A .unibeautify.json file would look like the following:

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,12 +1,10 @@
 using·System;␊
 ␊
+//·this·is·a·comment␊
+class·Program·{␊
 ··//·this·is·a·comment␊
-class·Program␊
-{␊
+··static·void·Main()·{␊
 ····//·this·is·a·comment␊
-static·void·Main()␊
-{␊
-········//·this·is·a·comment␊
-Console.WriteLine("Hello,·world!");␊
-}␊
+····Console.WriteLine("Hello,·world!");␊
+··}␊
 }
\ No newline at end of file

🔧 false

Using Pretty Diff beautifier:

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

How to configure A .unibeautify.json file would look like the following:

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,12 +1,10 @@
 using·System;␊
 ␊
-··//·this·is·a·comment␊
-class·Program␊
-{␊
-····//·this·is·a·comment␊
-static·void·Main()␊
-{␊
-········//·this·is·a·comment␊
-Console.WriteLine("Hello,·world!");␊
-}␊
+//·this·is·a·comment␊
+class·Program·{␊
+//·this·is·a·comment␊
+··static·void·Main()·{␊
+//·this·is·a·comment␊
+····Console.WriteLine("Hello,·world!");␊
+··}␊
 }
\ No newline at end of file

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>␊

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,28 +1,27 @@
-········//·Any·variable·set·here·can·be·used·by·all·pages␊
-····//·Start·session·management.·Used·to·track·session·variables␊
+//·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␊
+//·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--->␊
+<!---·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·*/␊
+/*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

🔧 false

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,28 +1,27 @@
-········//·Any·variable·set·here·can·be·used·by·all·pages␊
-····//·Start·session·management.·Used·to·track·session·variables␊
+//·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␊
+//·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--->␊
+<!---·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·*/␊
+/*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

Add EJS Example

No example found. Please submit a Pull Request!

Edit HTML Example

🚧 Original Code

<!DOCTYPE·html>␊
<html>␊
····<head>␊
<!--·Title·-->␊
········<meta·charset="utf-8">␊
········<title><%=·title·%></title>␊
····</head>␊
····<body></body>␊
</html>␊

🔧 true

Using Pretty Diff beautifier:

<!DOCTYPE·html>␊
<html>␊
··<head>␊
····<!--·Title·-->␊
····<meta·charset="utf-8">␊
····<title><%=·title·%></title>␊
··</head>␊
··<body></body>␊
</html>

How to configure A .unibeautify.json file would look like the following:

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,9 +1,9 @@
 <!DOCTYPE·html>␊
 <html>␊
-····<head>␊
-<!--·Title·-->␊
-········<meta·charset="utf-8">␊
-········<title><%=·title·%></title>␊
-····</head>␊
-····<body></body>␊
-</html>␊
+··<head>␊
+····<!--·Title·-->␊
+····<meta·charset="utf-8">␊
+····<title><%=·title·%></title>␊
+··</head>␊
+··<body></body>␊
+</html>
\ No newline at end of file

🔧 false

Using Pretty Diff beautifier:

<!DOCTYPE·html>␊
<html>␊
··<head>␊
<!--·Title·-->␊
····<meta·charset="utf-8">␊
····<title><%=·title·%></title>␊
··</head>␊
··<body></body>␊
</html>

How to configure A .unibeautify.json file would look like the following:

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,9 +1,9 @@
 <!DOCTYPE·html>␊
 <html>␊
-····<head>␊
+··<head>␊
 <!--·Title·-->␊
-········<meta·charset="utf-8">␊
-········<title><%=·title·%></title>␊
-····</head>␊
-····<body></body>␊
-</html>␊
+····<meta·charset="utf-8">␊
+····<title><%=·title·%></title>␊
+··</head>␊
+··<body></body>␊
+</html>
\ No newline at end of file

Edit HTML+ERB Example

🚧 Original Code

<!DOCTYPE·html>␊
<html>␊
····<head>␊
<!--·Title·-->␊
········<meta·charset="utf-8">␊
········<title><%=·title·%></title>␊
····</head>␊
····<body></body>␊
</html>␊

🔧 true

Using Pretty Diff beautifier:

<!DOCTYPE·html>␊
<html>␊
··<head>␊
····<!--·Title·-->␊
····<meta·charset="utf-8">␊
····<title><%=·title·%></title>␊
··</head>␊
··<body></body>␊
</html>

How to configure A .unibeautify.json file would look like the following:

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,9 +1,9 @@
 <!DOCTYPE·html>␊
 <html>␊
-····<head>␊
-<!--·Title·-->␊
-········<meta·charset="utf-8">␊
-········<title><%=·title·%></title>␊
-····</head>␊
-····<body></body>␊
-</html>␊
+··<head>␊
+····<!--·Title·-->␊
+····<meta·charset="utf-8">␊
+····<title><%=·title·%></title>␊
+··</head>␊
+··<body></body>␊
+</html>
\ No newline at end of file

🔧 false

Using Pretty Diff beautifier:

<!DOCTYPE·html>␊
<html>␊
··<head>␊
<!--·Title·-->␊
····<meta·charset="utf-8">␊
····<title><%=·title·%></title>␊
··</head>␊
··<body></body>␊
</html>

How to configure A .unibeautify.json file would look like the following:

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,9 +1,9 @@
 <!DOCTYPE·html>␊
 <html>␊
-····<head>␊
+··<head>␊
 <!--·Title·-->␊
-········<meta·charset="utf-8">␊
-········<title><%=·title·%></title>␊
-····</head>␊
-····<body></body>␊
-</html>␊
+····<meta·charset="utf-8">␊
+····<title><%=·title·%></title>␊
+··</head>␊
+··<body></body>␊
+</html>
\ No newline at end of file

Add Handlebars Example

No example found. Please submit a Pull Request!

Edit JSON5 Example

🚧 Original Code

{␊
//·this·is·a·test␊
····"key":·"value"␊
}

🔧 true

Using Pretty Diff beautifier:

{␊
··//·this·is·a·test␊
··"key":·"value"␊
}

How to configure A .unibeautify.json file would look like the following:

{
  "JSON5": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,4 +1,4 @@
 {␊
-//·this·is·a·test␊
-····"key":·"value"␊
+··//·this·is·a·test␊
+··"key":·"value"␊
 }
\ No newline at end of file

🔧 false

Using Pretty Diff beautifier:

{␊
//·this·is·a·test␊
··"key":·"value"␊
}

How to configure A .unibeautify.json file would look like the following:

{
  "JSON5": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,4 +1,4 @@
 {␊
 //·this·is·a·test␊
-····"key":·"value"␊
+··"key":·"value"␊
 }
\ No newline at end of file

Edit JSX Example

🚧 Original Code

/*␊
This·␊
···is·␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
······//·Comment␊
······b·=·c;␊
//·Comment␊
function·foo(d)·{␊
··········//·Comment␊
··········e·=·f;␊
··}␊
}␊
␊
··//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
······//·Comment␊
······e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
······e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

🔧 true

Using Pretty Diff beautifier:

/*␊
This␊
···is␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

How to configure A .unibeautify.json file would look like the following:

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,7 +1,7 @@
 /*␊
-This·␊
-···is·␊
+This␊
+···is␊
 ······a␊
 ········test␊
 */␊
 //·This␊
@@ -10,37 +10,37 @@
 //········test␊
 ␊
 //·Comment␊
 if·(a)·{␊
-//·Comment␊
-······//·Comment␊
-······b·=·c;␊
-//·Comment␊
-function·foo(d)·{␊
-··········//·Comment␊
-··········e·=·f;␊
+··//·Comment␊
+··//·Comment␊
+··b·=·c;␊
+··//·Comment␊
+··function·foo(d)·{␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
-··//·Comment␊
+//·Comment␊
 if·(a)·{␊
 ··//·Comment␊
 ··b·=·c;␊
 ··//·Comment␊
 ··function·foo(d)·{␊
-······//·Comment␊
-······e·=·f;␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊
 if·(a)·{␊
-//·Comment␊
+··//·Comment␊
 ··b·=·c;␊
-//·Comment␊
+··//·Comment␊
 ··function·foo(d)·{␊
-//·Comment␊
-······e·=·f;␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊

🔧 false

Using Pretty Diff beautifier:

/*␊
This␊
···is␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

How to configure A .unibeautify.json file would look like the following:

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,7 +1,7 @@
 /*␊
-This·␊
-···is·␊
+This␊
+···is␊
 ······a␊
 ········test␊
 */␊
 //·This␊
@@ -11,25 +11,25 @@
 ␊
 //·Comment␊
 if·(a)·{␊
 //·Comment␊
-······//·Comment␊
-······b·=·c;␊
 //·Comment␊
-function·foo(d)·{␊
-··········//·Comment␊
-··········e·=·f;␊
+··b·=·c;␊
+//·Comment␊
+··function·foo(d)·{␊
+//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
-··//·Comment␊
+//·Comment␊
 if·(a)·{␊
-··//·Comment␊
+//·Comment␊
 ··b·=·c;␊
-··//·Comment␊
+//·Comment␊
 ··function·foo(d)·{␊
-······//·Comment␊
-······e·=·f;␊
+//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊
@@ -38,9 +38,9 @@
 ··b·=·c;␊
 //·Comment␊
 ··function·foo(d)·{␊
 //·Comment␊
-······e·=·f;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊

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

🔧 true

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

Difference from original

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

🔧 false

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

Difference from original

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

Edit JavaScript Example

🚧 Original Code

/*␊
This·␊
···is·␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
······//·Comment␊
······b·=·c;␊
//·Comment␊
function·foo(d)·{␊
··········//·Comment␊
··········e·=·f;␊
··}␊
}␊
␊
··//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
······//·Comment␊
······e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
······e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

🔧 true

Using Pretty Diff beautifier:

/*␊
This␊
···is␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

How to configure A .unibeautify.json file would look like the following:

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,7 +1,7 @@
 /*␊
-This·␊
-···is·␊
+This␊
+···is␊
 ······a␊
 ········test␊
 */␊
 //·This␊
@@ -10,37 +10,37 @@
 //········test␊
 ␊
 //·Comment␊
 if·(a)·{␊
-//·Comment␊
-······//·Comment␊
-······b·=·c;␊
-//·Comment␊
-function·foo(d)·{␊
-··········//·Comment␊
-··········e·=·f;␊
+··//·Comment␊
+··//·Comment␊
+··b·=·c;␊
+··//·Comment␊
+··function·foo(d)·{␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
-··//·Comment␊
+//·Comment␊
 if·(a)·{␊
 ··//·Comment␊
 ··b·=·c;␊
 ··//·Comment␊
 ··function·foo(d)·{␊
-······//·Comment␊
-······e·=·f;␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊
 if·(a)·{␊
-//·Comment␊
+··//·Comment␊
 ··b·=·c;␊
-//·Comment␊
+··//·Comment␊
 ··function·foo(d)·{␊
-//·Comment␊
-······e·=·f;␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊

🔧 false

Using Pretty Diff beautifier:

/*␊
This␊
···is␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

How to configure A .unibeautify.json file would look like the following:

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,7 +1,7 @@
 /*␊
-This·␊
-···is·␊
+This␊
+···is␊
 ······a␊
 ········test␊
 */␊
 //·This␊
@@ -11,25 +11,25 @@
 ␊
 //·Comment␊
 if·(a)·{␊
 //·Comment␊
-······//·Comment␊
-······b·=·c;␊
 //·Comment␊
-function·foo(d)·{␊
-··········//·Comment␊
-··········e·=·f;␊
+··b·=·c;␊
+//·Comment␊
+··function·foo(d)·{␊
+//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
-··//·Comment␊
+//·Comment␊
 if·(a)·{␊
-··//·Comment␊
+//·Comment␊
 ··b·=·c;␊
-··//·Comment␊
+//·Comment␊
 ··function·foo(d)·{␊
-······//·Comment␊
-······e·=·f;␊
+//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊
@@ -38,9 +38,9 @@
 ··b·=·c;␊
 //·Comment␊
 ··function·foo(d)·{␊
 //·Comment␊
-······e·=·f;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊

Add Riot Example

No example found. Please submit a Pull Request!

Add SVG Example

No example found. Please submit a Pull Request!

Add Spacebars Example

No example found. Please submit a Pull Request!

Add Swig Example

No example found. Please submit a Pull Request!

Add Twig Example

No example found. Please submit a Pull Request!

Edit TypeScript Example

🚧 Original Code

/*␊
This·␊
···is·␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
······//·Comment␊
······b·=·c;␊
//·Comment␊
function·foo(d)·{␊
··········//·Comment␊
··········e·=·f;␊
··}␊
}␊
␊
··//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
······//·Comment␊
······e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
······e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

🔧 true

Using Pretty Diff beautifier:

/*␊
This␊
···is␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
··//·Comment␊
··b·=·c;␊
··//·Comment␊
··function·foo(d)·{␊
····//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

How to configure A .unibeautify.json file would look like the following:

{
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,7 +1,7 @@
 /*␊
-This·␊
-···is·␊
+This␊
+···is␊
 ······a␊
 ········test␊
 */␊
 //·This␊
@@ -10,37 +10,37 @@
 //········test␊
 ␊
 //·Comment␊
 if·(a)·{␊
-//·Comment␊
-······//·Comment␊
-······b·=·c;␊
-//·Comment␊
-function·foo(d)·{␊
-··········//·Comment␊
-··········e·=·f;␊
+··//·Comment␊
+··//·Comment␊
+··b·=·c;␊
+··//·Comment␊
+··function·foo(d)·{␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
-··//·Comment␊
+//·Comment␊
 if·(a)·{␊
 ··//·Comment␊
 ··b·=·c;␊
 ··//·Comment␊
 ··function·foo(d)·{␊
-······//·Comment␊
-······e·=·f;␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊
 if·(a)·{␊
-//·Comment␊
+··//·Comment␊
 ··b·=·c;␊
-//·Comment␊
+··//·Comment␊
 ··function·foo(d)·{␊
-//·Comment␊
-······e·=·f;␊
+····//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊

🔧 false

Using Pretty Diff beautifier:

/*␊
This␊
···is␊
······a␊
········test␊
*/␊
//·This␊
//···is␊
//······a␊
//········test␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
if·(a)·{␊
//·Comment␊
··b·=·c;␊
//·Comment␊
··function·foo(d)·{␊
//·Comment␊
····e·=·f;␊
··}␊
}␊
␊
//·Comment␊
foo.bar.baz();␊

How to configure A .unibeautify.json file would look like the following:

{
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,7 +1,7 @@
 /*␊
-This·␊
-···is·␊
+This␊
+···is␊
 ······a␊
 ········test␊
 */␊
 //·This␊
@@ -11,25 +11,25 @@
 ␊
 //·Comment␊
 if·(a)·{␊
 //·Comment␊
-······//·Comment␊
-······b·=·c;␊
 //·Comment␊
-function·foo(d)·{␊
-··········//·Comment␊
-··········e·=·f;␊
+··b·=·c;␊
+//·Comment␊
+··function·foo(d)·{␊
+//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
-··//·Comment␊
+//·Comment␊
 if·(a)·{␊
-··//·Comment␊
+//·Comment␊
 ··b·=·c;␊
-··//·Comment␊
+//·Comment␊
 ··function·foo(d)·{␊
-······//·Comment␊
-······e·=·f;␊
+//·Comment␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊
@@ -38,9 +38,9 @@
 ··b·=·c;␊
 //·Comment␊
 ··function·foo(d)·{␊
 //·Comment␊
-······e·=·f;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 //·Comment␊

Add Visualforce Example

No example found. Please submit a Pull Request!

Edit XML Example

🚧 Original Code

<!DOCTYPE·html>␊
<html>␊
····<head>␊
<!--·Title·-->␊
········<meta·charset="utf-8">␊
········<title><%=·title·%></title>␊
····</head>␊
····<body></body>␊
</html>␊

🔧 true

Using Pretty Diff beautifier:

<!DOCTYPE·html>␊
<html>␊
··<head>␊
····<!--·Title·-->␊
····<meta·charset="utf-8">␊
······<title><%=·title·%></title>␊
····</head>␊
····<body></body>␊
··</html>

How to configure A .unibeautify.json file would look like the following:

{
  "XML": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,9 +1,9 @@
 <!DOCTYPE·html>␊
 <html>␊
-····<head>␊
-<!--·Title·-->␊
-········<meta·charset="utf-8">␊
-········<title><%=·title·%></title>␊
+··<head>␊
+····<!--·Title·-->␊
+····<meta·charset="utf-8">␊
+······<title><%=·title·%></title>␊
 ····</head>␊
 ····<body></body>␊
-</html>␊
+··</html>
\ No newline at end of file

🔧 false

Using Pretty Diff beautifier:

<!DOCTYPE·html>␊
<html>␊
··<head>␊
<!--·Title·-->␊
····<meta·charset="utf-8">␊
······<title><%=·title·%></title>␊
····</head>␊
····<body></body>␊
··</html>

How to configure A .unibeautify.json file would look like the following:

{
  "XML": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_comments": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,9 +1,9 @@
 <!DOCTYPE·html>␊
 <html>␊
-····<head>␊
+··<head>␊
 <!--·Title·-->␊
-········<meta·charset="utf-8">␊
-········<title><%=·title·%></title>␊
+····<meta·charset="utf-8">␊
+······<title><%=·title·%></title>␊
 ····</head>␊
 ····<body></body>␊
-</html>␊
+··</html>
\ No newline at end of file

Add XTemplate Example

No example found. Please submit a Pull Request!

← Indent Chained MethodsIndent Inner Html →
  • Support
  • Examples
Unibeautify
Docs
Getting StartedCLIConfigurationOptions
Community
User ShowcaseStack Overflow@Unibeautify on TwitterFollow Unibeautify on Twitter
More
GitHubStar Unibeautify on GitHubCode coverage of UnibeautifyCode coverage of Unibeautify
© 2020 Glavin Wiechert
Credits