Unibeautify
  • Install
  • Docs
  • Assistant
  • Playground
  • GitHub

›F

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

Force Indentation

Config Key: force_indentation

Description: if indentation should be forcefully applied to markup even if it disruptively adds unintended whitespace to the documents rendered output

Available since version: 0.7.0 (Current: npm)

Type: boolean

Default: false

Support

Edit Beautifiers

Languages: ColdFusion, HTML, HTML+ERB, Handlebars, SVG, Spacebars, Visualforce, XML, XTemplate

Beautifiers: Pretty Diff

Comparison Table

LanguagePretty Diff
ColdFusion✅
HTML✅
HTML+ERB✅
Handlebars✅
SVG✅
Spacebars✅
Visualforce✅
XML✅
XTemplate✅

Examples

Invisible characters are shown with the following symbols:

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

Edit ColdFusion Example

🚧 Original Code

<cfquery·name="getUser"·datasource="#request.datasource#">␊
select·ID,·LastName,·FirstName,·FirstTime·from·profile␊
where·Username·=·'gaurang'·and·Password=·123456␊
</cfquery>␊
␊
<body&gy;␊
<cfoutput·query=”getUser”>␊
<table>␊
<tr>␊
<td>#getUser.ID#</td>␊
<td>#getUser.FirstName#</td>␊
<td>#getUser.LastName#</td>␊
<td>#getUser.FirstTime#</td>␊
</cfoutput>␊
</body&gy;␊

🔧 true

Using Pretty Diff beautifier:

<cfquery·name·=·"getUser"·datasource·=·"#request.datasource#"·>·select·ID,␊
LastName,␊
FirstName,␊
FirstTime·from·profile␊
where·Username·=·'gaurang'·and·Password·=·123456·<·/cfquery>␊
␊
<body&gy;␊
<cfoutput·query=”getUser”>␊
<table>␊
<tr>␊
<td>#getUser.ID#</td·>·<td>␊
··#getUser.FirstName#</td>·<·td·>·#getUser.LastName#</td>·<·td·>·#getUser.FirstTime#</td>·<·/cfoutput>␊
</body·&·gy;␊

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,15 +1,13 @@
-<cfquery·name="getUser"·datasource="#request.datasource#">␊
-select·ID,·LastName,·FirstName,·FirstTime·from·profile␊
-where·Username·=·'gaurang'·and·Password=·123456␊
-</cfquery>␊
+<cfquery·name·=·"getUser"·datasource·=·"#request.datasource#"·>·select·ID,␊
+LastName,␊
+FirstName,␊
+FirstTime·from·profile␊
+where·Username·=·'gaurang'·and·Password·=·123456·<·/cfquery>␊
 ␊
 <body&gy;␊
 <cfoutput·query=”getUser”>␊
 <table>␊
 <tr>␊
-<td>#getUser.ID#</td>␊
-<td>#getUser.FirstName#</td>␊
-<td>#getUser.LastName#</td>␊
-<td>#getUser.FirstTime#</td>␊
-</cfoutput>␊
-</body&gy;␊
+<td>#getUser.ID#</td·>·<td>␊
+··#getUser.FirstName#</td>·<·td·>·#getUser.LastName#</td>·<·td·>·#getUser.FirstTime#</td>·<·/cfoutput>␊
+</body·&·gy;␊

🔧 false

Using Pretty Diff beautifier:

<cfquery·name·=·"getUser"·datasource·=·"#request.datasource#"·>·select·ID,␊
LastName,␊
FirstName,␊
FirstTime·from·profile␊
where·Username·=·'gaurang'·and·Password·=·123456·<·/cfquery>␊
␊
<body&gy;␊
<cfoutput·query=”getUser”>␊
<table>␊
<tr>␊
<td>#getUser.ID#</td·>·<td>#getUser.FirstName#</td>·<·td·>·#getUser.LastName#</td>·<·td·>·#getUser.FirstTime#</td>·<·/cfoutput>␊
</body·&·gy;␊

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

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,15 +1,12 @@
-<cfquery·name="getUser"·datasource="#request.datasource#">␊
-select·ID,·LastName,·FirstName,·FirstTime·from·profile␊
-where·Username·=·'gaurang'·and·Password=·123456␊
-</cfquery>␊
+<cfquery·name·=·"getUser"·datasource·=·"#request.datasource#"·>·select·ID,␊
+LastName,␊
+FirstName,␊
+FirstTime·from·profile␊
+where·Username·=·'gaurang'·and·Password·=·123456·<·/cfquery>␊
 ␊
 <body&gy;␊
 <cfoutput·query=”getUser”>␊
 <table>␊
 <tr>␊
-<td>#getUser.ID#</td>␊
-<td>#getUser.FirstName#</td>␊
-<td>#getUser.LastName#</td>␊
-<td>#getUser.FirstTime#</td>␊
-</cfoutput>␊
-</body&gy;␊
+<td>#getUser.ID#</td·>·<td>#getUser.FirstName#</td>·<·td·>·#getUser.LastName#</td>·<·td·>·#getUser.FirstTime#</td>·<·/cfoutput>␊
+</body·&·gy;␊

Edit HTML Example

🚧 Original Code

<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊

🔧 true

Using Pretty Diff beautifier:

<html·xmlns="http://www.w3.org/1999/xhtml">␊
··<head>␊
····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
····<title></title>␊
··</head>␊
··<body>␊
····<h1>␊
······Hello,·World!</h1>␊
····<div>␊
······from␊
······<i>␊
········An·XSLT·Programmer</i>␊
····</div>␊
··</body>␊
</html>

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,1 +1,15 @@
-<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊
+<html·xmlns="http://www.w3.org/1999/xhtml">␊
+··<head>␊
+····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
+····<title></title>␊
+··</head>␊
+··<body>␊
+····<h1>␊
+······Hello,·World!</h1>␊
+····<div>␊
+······from␊
+······<i>␊
+········An·XSLT·Programmer</i>␊
+····</div>␊
+··</body>␊
+</html>
\ No newline at end of file

🔧 false

Using Pretty Diff beautifier:

<html·xmlns="http://www.w3.org/1999/xhtml">␊
··<head>␊
····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
····<title></title>␊
··</head>␊
··<body>␊
····<h1>Hello,·World!</h1>␊
····<div>from␊
······<i>An·XSLT·Programmer</i>␊
····</div>␊
··</body>␊
</html>

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

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,1 +1,12 @@
-<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊
+<html·xmlns="http://www.w3.org/1999/xhtml">␊
+··<head>␊
+····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
+····<title></title>␊
+··</head>␊
+··<body>␊
+····<h1>Hello,·World!</h1>␊
+····<div>from␊
+······<i>An·XSLT·Programmer</i>␊
+····</div>␊
+··</body>␊
+</html>
\ No newline at end of file

Edit HTML+ERB Example

🚧 Original Code

<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊

🔧 true

Using Pretty Diff beautifier:

<html·xmlns="http://www.w3.org/1999/xhtml">␊
··<head>␊
····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
····<title></title>␊
··</head>␊
··<body>␊
····<h1>␊
······Hello,·World!</h1>␊
····<div>␊
······from␊
······<i>␊
········An·XSLT·Programmer</i>␊
····</div>␊
··</body>␊
</html>

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,1 +1,15 @@
-<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊
+<html·xmlns="http://www.w3.org/1999/xhtml">␊
+··<head>␊
+····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
+····<title></title>␊
+··</head>␊
+··<body>␊
+····<h1>␊
+······Hello,·World!</h1>␊
+····<div>␊
+······from␊
+······<i>␊
+········An·XSLT·Programmer</i>␊
+····</div>␊
+··</body>␊
+</html>
\ No newline at end of file

🔧 false

Using Pretty Diff beautifier:

<html·xmlns="http://www.w3.org/1999/xhtml">␊
··<head>␊
····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
····<title></title>␊
··</head>␊
··<body>␊
····<h1>Hello,·World!</h1>␊
····<div>from␊
······<i>An·XSLT·Programmer</i>␊
····</div>␊
··</body>␊
</html>

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

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,1 +1,12 @@
-<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊
+<html·xmlns="http://www.w3.org/1999/xhtml">␊
+··<head>␊
+····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
+····<title></title>␊
+··</head>␊
+··<body>␊
+····<h1>Hello,·World!</h1>␊
+····<div>from␊
+······<i>An·XSLT·Programmer</i>␊
+····</div>␊
+··</body>␊
+</html>
\ No newline at end of file

Add Handlebars 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 Visualforce Example

No example found. Please submit a Pull Request!

Edit XML Example

🚧 Original Code

<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊

🔧 true

Using Pretty Diff beautifier:

<html·xmlns="http://www.w3.org/1999/xhtml">␊
··<head>␊
····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
····<title></title>␊
··</head>␊
··<body>␊
····<h1>␊
······Hello,·World!</h1>␊
····<div>␊
······from␊
······<i>␊
········An·XSLT·Programmer</i>␊
····</div>␊
··</body>␊
</html>

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,1 +1,15 @@
-<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊
+<html·xmlns="http://www.w3.org/1999/xhtml">␊
+··<head>␊
+····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
+····<title></title>␊
+··</head>␊
+··<body>␊
+····<h1>␊
+······Hello,·World!</h1>␊
+····<div>␊
+······from␊
+······<i>␊
+········An·XSLT·Programmer</i>␊
+····</div>␊
+··</body>␊
+</html>
\ No newline at end of file

🔧 false

Using Pretty Diff beautifier:

<html·xmlns="http://www.w3.org/1999/xhtml">␊
··<head>␊
····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
····<title></title>␊
··</head>␊
··<body>␊
····<h1>Hello,·World!</h1>␊
····<div>from␊
······<i>An·XSLT·Programmer</i>␊
····</div>␊
··</body>␊
</html>

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

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,1 +1,12 @@
-<html·xmlns="http://www.w3.org/1999/xhtml"><head>·<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>·<title></title></head><body><h1>Hello,·World!</h1><div>from·<i>An·XSLT·Programmer</i></div></body></html>␊
+<html·xmlns="http://www.w3.org/1999/xhtml">␊
+··<head>␊
+····<meta·content="text/html;·charset=UTF-8"·http-equiv="Content-Type"/>␊
+····<title></title>␊
+··</head>␊
+··<body>␊
+····<h1>Hello,·World!</h1>␊
+····<div>from␊
+······<i>An·XSLT·Programmer</i>␊
+····</div>␊
+··</body>␊
+</html>
\ No newline at end of file

Add XTemplate Example

No example found. Please submit a Pull Request!

← End With SemicolonIdentifier Case →
  • 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