Unibeautify
  • Install
  • Docs
  • Assistant
  • Playground
  • GitHub

›P

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

Pragma Insert

Config Key: pragma_insert

Description: Insert a marker at the top of a file specifying the file has been beautified

Available since version: 0.7.0 (Current: npm)

Type: boolean

Default: false

Support

Edit Beautifiers

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

Beautifiers: Prettier

Comparison Table

LanguagePrettier
CSS✅
GraphQL✅
JSX✅
JavaScript✅
Less✅
Markdown✅
SCSS✅
TypeScript✅
Vue✅

Examples

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:

/**·@format·*/␊
␊
.class1·{␊
··background-color:·red;␊
}␊

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,3 +1,5 @@
+/**·@format·*/␊
+␊
 .class1·{␊
 ··background-color:·red;␊
 }␊

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified

Edit GraphQL Example

🚧 Original Code

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

🔧 true

Using Prettier beautifier:

#·@format␊
␊
{␊
··me·{␊
····name␊
··}␊
}␊

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,5 +1,7 @@
+#·@format␊
+␊
 {␊
-····me·{␊
-········name␊
-····}␊
+··me·{␊
+····name␊
+··}␊
 }␊

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

Difference from original

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

Edit JSX Example

🚧 Original Code

function·sayHello()·{␊
console.log("Hello·world");␊
}

🔧 true

Using Prettier beautifier:

/**·@format·*/␊
␊
function·sayHello()·{␊
··console.log("Hello·world");␊
}␊

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

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,3 +1,5 @@
+/**·@format·*/␊
+␊
 function·sayHello()·{␊
\ No newline at end of file
-console.log("Hello·world");␊
-}
+··console.log("Hello·world");␊
+}␊

🔧 false

Using Prettier beautifier:

function·sayHello()·{␊
··console.log("Hello·world");␊
}␊

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

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,3 +1,3 @@
 function·sayHello()·{␊
-console.log("Hello·world");␊
-}
\ No newline at end of file
+··console.log("Hello·world");␊
+}␊

Edit JavaScript Example

🚧 Original Code

function·sayHello()·{␊
console.log("Hello·world");␊
}

🔧 true

Using Prettier beautifier:

/**·@format·*/␊
␊
function·sayHello()·{␊
··console.log("Hello·world");␊
}␊

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

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,3 +1,5 @@
+/**·@format·*/␊
+␊
 function·sayHello()·{␊
\ No newline at end of file
-console.log("Hello·world");␊
-}
+··console.log("Hello·world");␊
+}␊

🔧 false

Using Prettier beautifier:

function·sayHello()·{␊
··console.log("Hello·world");␊
}␊

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

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,3 +1,3 @@
 function·sayHello()·{␊
-console.log("Hello·world");␊
-}
\ No newline at end of file
+··console.log("Hello·world");␊
+}␊

Edit Less Example

🚧 Original Code

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

🔧 true

Using Prettier beautifier:

/**·@format·*/␊
␊
@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_insert": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,5 +1,7 @@
-@primary:··green;␊
+/**·@format·*/␊
+␊
+@primary:·green;␊
 @secondary:·blue;␊
 ␊
 .section·{␊
 ··@color:·primary;␊

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

Difference from original

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

Edit Markdown Example

🚧 Original Code

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

🔧 true

Using Prettier beautifier:

<!--·@format·-->␊
␊
#·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_insert": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,3 +1,5 @@
+<!--·@format·-->␊
+␊
 #·Hello·World␊
 ␊
 This·is·a·test␊

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified

Edit SCSS Example

🚧 Original Code

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

🔧 true

Using Prettier beautifier:

/**·@format·*/␊
␊
.selector·{␊
··background-color:·red;␊
}␊

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

{
  "SCSS": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

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

🔧 false

Using Prettier beautifier:

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

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

{
  "SCSS": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

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

Edit TypeScript Example

🚧 Original Code

function·sayHello()·{␊
console.log("Hello·world");␊
}

🔧 true

Using Prettier beautifier:

/**·@format·*/␊
␊
function·sayHello()·{␊
··console.log("Hello·world");␊
}␊

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

{
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,3 +1,5 @@
+/**·@format·*/␊
+␊
 function·sayHello()·{␊
\ No newline at end of file
-console.log("Hello·world");␊
-}
+··console.log("Hello·world");␊
+}␊

🔧 false

Using Prettier beautifier:

function·sayHello()·{␊
··console.log("Hello·world");␊
}␊

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

{
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,3 +1,3 @@
 function·sayHello()·{␊
-console.log("Hello·world");␊
-}
\ No newline at end of file
+··console.log("Hello·world");␊
+}␊

Edit Vue Example

🚧 Original Code

<div·id="app">␊
··{{·message·}}␊
</div>␊

🔧 true

Using Prettier beautifier:

<!--·@format·-->␊
␊
<div·id="app">␊
··{{·message·}}␊
</div>␊

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

{
  "Vue": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": true,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,3 +1,5 @@
+<!--·@format·-->␊
+␊
 <div·id="app">␊
 ··{{·message·}}␊
 </div>␊

🔧 false

Using Prettier beautifier:

<div·id="app">␊
··{{·message·}}␊
</div>␊

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

{
  "Vue": {
    "indent_size": 2,
    "indent_char": " ",
    "pragma_insert": false,
    "beautifiers": [
      "Prettier"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified

← Object Curly SpacingPragma Require →
  • 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