Indent Scripts · Unibeautify

Config Key: indent_scripts

Description: Indent scripts

Available since version: 0.7.0 (Current: )

Type: string

Default: "normal"

Allowed values: "keep" or "separate" or "normal"

Support

Edit Beautifiers

Languages: HTML, Handlebars, Liquid, Mustache, XML

Beautifiers: JS-Beautify

Comparison Table

Language	JS-Beautify
HTML	✅
Handlebars	✅
Liquid	✅
Mustache	✅
XML	✅

Examples

Select Language:

Invisible characters are shown with the following symbols:

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

Edit HTML Example

🚧 Original Code

<html>␊
␊
<body>␊
<script>␊
console.log("hello·world");␊
</script>␊
</body>␊
␊
</html>

🔧 "keep"

Using JS-Beautify beautifier:

<html>␊
␊
<body>␊
··<script>␊
··console.log("hello·world");␊
··</script>␊
</body>␊
␊
</html>

How to configure

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

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

Difference from original

Index: keep
===================================================================
--- keep    Original
+++ keep    Beautified
@@ -1,9 +1,9 @@
 <html>␊
 ␊
 <body>␊
-<script>␊
-console.log("hello·world");␊
-</script>␊
+··<script>␊
+··console.log("hello·world");␊
+··</script>␊
 </body>␊
 ␊
 </html>
\ No newline at end of file

🔧 "separate"

Using JS-Beautify beautifier:

<html>␊
␊
<body>␊
··<script>␊
console.log("hello·world");␊
··</script>␊
</body>␊
␊
</html>

How to configure

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

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

Difference from original

Index: separate
===================================================================
--- separate    Original
+++ separate    Beautified
@@ -1,9 +1,9 @@
 <html>␊
 ␊
 <body>␊
-<script>␊
+··<script>␊
 console.log("hello·world");␊
-</script>␊
+··</script>␊
 </body>␊
 ␊
 </html>
\ No newline at end of file

🔧 "normal"

Using JS-Beautify beautifier:

<html>␊
␊
<body>␊
··<script>␊
····console.log("hello·world");␊
··</script>␊
</body>␊
␊
</html>

How to configure

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

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

Difference from original

Index: normal
===================================================================
--- normal  Original
+++ normal  Beautified
@@ -1,9 +1,9 @@
 <html>␊
 ␊
 <body>␊
-<script>␊
-console.log("hello·world");␊
-</script>␊
+··<script>␊
+····console.log("hello·world");␊
+··</script>␊
 </body>␊
 ␊
 </html>
\ No newline at end of file

Edit XML Example

🚧 Original Code

<html>␊
␊
<body>␊
<script>␊
console.log("hello·world");␊
</script>␊
</body>␊
␊
</html>

🔧 "keep"

Using JS-Beautify beautifier:

<html>␊
␊
<body>␊
··<script>␊
··console.log("hello·world");␊
··</script>␊
</body>␊
␊
</html>

How to configure

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

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

Difference from original

Index: keep
===================================================================
--- keep    Original
+++ keep    Beautified
@@ -1,9 +1,9 @@
 <html>␊
 ␊
 <body>␊
-<script>␊
-console.log("hello·world");␊
-</script>␊
+··<script>␊
+··console.log("hello·world");␊
+··</script>␊
 </body>␊
 ␊
 </html>
\ No newline at end of file

🔧 "separate"

Using JS-Beautify beautifier:

<html>␊
␊
<body>␊
··<script>␊
console.log("hello·world");␊
··</script>␊
</body>␊
␊
</html>

How to configure

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

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

Difference from original

Index: separate
===================================================================
--- separate    Original
+++ separate    Beautified
@@ -1,9 +1,9 @@
 <html>␊
 ␊
 <body>␊
-<script>␊
+··<script>␊
 console.log("hello·world");␊
-</script>␊
+··</script>␊
 </body>␊
 ␊
 </html>
\ No newline at end of file

🔧 "normal"

Using JS-Beautify beautifier:

<html>␊
␊
<body>␊
··<script>␊
····console.log("hello·world");␊
··</script>␊
</body>␊
␊
</html>

How to configure

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

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

Difference from original

Index: normal
===================================================================
--- normal  Original
+++ normal  Beautified
@@ -1,9 +1,9 @@
 <html>␊
 ␊
 <body>␊
-<script>␊
-console.log("hello·world");␊
-</script>␊
+··<script>␊
+····console.log("hello·world");␊
+··</script>␊
 </body>␊
 ␊
 </html>
\ No newline at end of file