Edit

Pragma Require

Config Key: pragma_require

Description: Restrict beautifying files to only those with a pragma at the top

Available since version: 0.7.0 (Current: )

Type: boolean

Default: false

Support

Edit Beautifiers

Languages: CSS, GraphQL, JSX, JavaScript, Less, Markdown, SCSS, TypeScript, Vue

Beautifiers: Prettier

Comparison Table

Language	Prettier
CSS	✅
GraphQL	✅
JSX	✅
JavaScript	✅
Less	✅
Markdown	✅
SCSS	✅
TypeScript	✅
Vue	✅

Examples

Select Language:

CSS * GraphQL * JSX * JavaScript * Less * Markdown * SCSS * TypeScript * Vue *

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 Prettier beautifier:

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

How to configure

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

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_require": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

Using Prettier beautifier:

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

How to configure

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

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_require": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

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

Edit GraphQL Example

🚧 Original Code

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

🔧 true

Using Prettier beautifier:

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

How to configure

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

{
  "GraphQL": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_require": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

Using Prettier beautifier:

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

How to configure

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

{
  "GraphQL": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_require": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

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

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

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,15 +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;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 foo.bar.baz();␊

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

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,15 +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;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 foo.bar.baz();␊

Edit Less Example

🚧 Original Code

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

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,10 +1,10 @@
-@primary:··green;␊
+@primary:·green;␊
 @secondary:·blue;␊
 ␊
 .section·{␊
-@color:·primary;␊
+··@color:·primary;␊
 ␊
-.element·{␊
-color:·@@color;␊
+··.element·{␊
+····color:·@@color;␊
+··}␊
 }␊
-}␊

Edit Markdown Example

🚧 Original Code

#······Hello····World␊
␊
This······is····a······test␊

🔧 true

Using Prettier beautifier:

#······Hello····World␊
␊
This······is····a······test␊

How to configure

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

{
  "Markdown": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_require": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

Using Prettier beautifier:

#·Hello·World␊
␊
This·is·a·test␊

How to configure

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

{
  "Markdown": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_require": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,3 +1,3 @@
-#······Hello····World␊
+#·Hello·World␊
 ␊
-This······is····a······test␊
+This·is·a·test␊

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

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   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 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();␊

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,15 +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;␊
+····e·=·f;␊
 ··}␊
 }␊
 ␊
 foo.bar.baz();␊

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

🔧 true

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified

🔧 false

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

Difference from original

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