Preserve Newlines · Unibeautify

Config Key: preserve_newlines

Description: Preserve line-breaks

Available since version: 0.7.0 (Current: )

Type: boolean

Default: true

Support

Edit Beautifiers

Languages: CSS, EJS, HTML, Handlebars, JSX, JavaScript, Liquid, Mustache, XML

Beautifiers: JS-Beautify

Comparison Table

Language	JS-Beautify
CSS	✅
EJS	✅
HTML	✅
Handlebars	✅
JSX	✅
JavaScript	✅
Liquid	✅
Mustache	✅
XML	✅

Examples

Select Language:

Invisible characters are shown with the following symbols:

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

Edit CSS Example

🚧 Original Code

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

🔧 true

Using JS-Beautify beautifier:

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

How to configure

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

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "preserve_newlines": true,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,6 +1,5 @@
-␊
 .class1·{␊
 ␊
 ··background-color:·red;␊
 ␊
-}␊
+}
\ No newline at end of file

🔧 false

Using JS-Beautify beautifier:

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

How to configure

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

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "preserve_newlines": false,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,6 +1,3 @@
-␊
 .class1·{␊
-␊
 ··background-color:·red;␊
-␊
-}␊
+}
\ No newline at end of file

Edit HTML Example

🚧 Original Code

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

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -25,17 +25,13 @@
 ␊
 ␊
 ␊
 ␊
-<script>␊
+··<script>␊
+····console.log("hello·world");␊
+··</script>␊
 ␊
 ␊
-console.log("hello·world");␊
-␊
-␊
-</script>␊
-␊
-␊
 </body>␊
 ␊
 ␊
 ␊

🔧 false

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,42 +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 JSX Example

🚧 Original Code

␊
console.log("preserve_newlines1");␊
␊
␊
␊
console.log("preserve_newlines2");␊
␊
␊
console.log("preserve_newlines3");␊
␊

🔧 true

Using JS-Beautify beautifier:

console.log("preserve_newlines1");␊
␊
␊
␊
console.log("preserve_newlines2");␊
␊
␊
console.log("preserve_newlines3");

How to configure

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

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "preserve_newlines": true,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,10 +1,8 @@
-␊
 console.log("preserve_newlines1");␊
 ␊
 ␊
 ␊
 console.log("preserve_newlines2");␊
 ␊
 ␊
-console.log("preserve_newlines3");␊
-␊
+console.log("preserve_newlines3");
\ No newline at end of file

🔧 false

Using JS-Beautify beautifier:

console.log("preserve_newlines1");␊
console.log("preserve_newlines2");␊
console.log("preserve_newlines3");

How to configure

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

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "preserve_newlines": false,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,10 +1,3 @@
-␊
 console.log("preserve_newlines1");␊
-␊
-␊
-␊
 console.log("preserve_newlines2");␊
-␊
-␊
-console.log("preserve_newlines3");␊
-␊
+console.log("preserve_newlines3");
\ No newline at end of file

Edit JavaScript Example

🚧 Original Code

␊
console.log("preserve_newlines1");␊
␊
␊
␊
console.log("preserve_newlines2");␊
␊
␊
console.log("preserve_newlines3");␊
␊

🔧 true

Using JS-Beautify beautifier:

console.log("preserve_newlines1");␊
␊
␊
␊
console.log("preserve_newlines2");␊
␊
␊
console.log("preserve_newlines3");

How to configure

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

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "preserve_newlines": true,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,10 +1,8 @@
-␊
 console.log("preserve_newlines1");␊
 ␊
 ␊
 ␊
 console.log("preserve_newlines2");␊
 ␊
 ␊
-console.log("preserve_newlines3");␊
-␊
+console.log("preserve_newlines3");
\ No newline at end of file

🔧 false

Using JS-Beautify beautifier:

console.log("preserve_newlines1");␊
console.log("preserve_newlines2");␊
console.log("preserve_newlines3");

How to configure

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

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "preserve_newlines": false,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,10 +1,3 @@
-␊
 console.log("preserve_newlines1");␊
-␊
-␊
-␊
 console.log("preserve_newlines2");␊
-␊
-␊
-console.log("preserve_newlines3");␊
-␊
+console.log("preserve_newlines3");
\ No newline at end of file

Edit XML Example

🚧 Original Code

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

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -25,17 +25,13 @@
 ␊
 ␊
 ␊
 ␊
-<script>␊
+··<script>␊
+····console.log("hello·world");␊
+··</script>␊
 ␊
 ␊
-console.log("hello·world");␊
-␊
-␊
-</script>␊
-␊
-␊
 </body>␊
 ␊
 ␊
 ␊

🔧 false

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

Difference from original

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