Unibeautify
  • Install
  • Docs
  • Assistant
  • Playground
  • GitHub

›W

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

Wrap Attributes

Config Key: wrap_attributes

Description: Wrap attributes to new lines

Available since version: 0.7.0 (Current: npm)

Type: string

Default: "auto"

Allowed values: "auto" or "force" or "force-aligned"

Support

Edit Beautifiers

Languages: HTML, Handlebars, Liquid, Mustache, XML

Beautifiers: JS-Beautify

Comparison Table

LanguageJS-Beautify
HTML✅
Handlebars✅
Liquid✅
Mustache✅
XML✅

Examples

Invisible characters are shown with the following symbols:

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

Edit HTML Example

🚧 Original Code

<b·data-foo=""·data-bar=""></b>␊
<div·data-foo=""·data-bar=""></div>␊
<span·data-foo=""·data-bar=""></div>␊
␊
<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
␊
<input·type="hidden"·name="theName"·value="">␊

🔧 "auto"

Using JS-Beautify beautifier:

<b·data-foo=""·data-bar=""></b>␊
<div·data-foo=""·data-bar=""></div>␊
<span·data-foo=""·data-bar=""></div>␊
␊
··<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
␊
··<input·type="hidden"·name="theName"·value="">

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

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "wrap_attributes": "auto",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: auto
===================================================================
--- auto    Original
+++ auto    Beautified
@@ -1,7 +1,7 @@
 <b·data-foo=""·data-bar=""></b>␊
 <div·data-foo=""·data-bar=""></div>␊
 <span·data-foo=""·data-bar=""></div>␊
 ␊
-<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
+··<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
 ␊
-<input·type="hidden"·name="theName"·value="">␊
+··<input·type="hidden"·name="theName"·value="">
\ No newline at end of file

🔧 "force"

Using JS-Beautify beautifier:

<b·data-foo=""␊
··data-bar=""></b>␊
<div·data-foo=""␊
··data-bar=""></div>␊
<span·data-foo=""␊
··data-bar=""></div>␊
␊
··<input·class="input·is-small"␊
····type="text"␊
····v-model="domainFilter"␊
····placeholder="search">␊
␊
··<input·type="hidden"␊
····name="theName"␊
····value="">

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

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "wrap_attributes": "force",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: force
===================================================================
--- force   Original
+++ force   Beautified
@@ -1,7 +1,15 @@
-<b·data-foo=""·data-bar=""></b>␊
-<div·data-foo=""·data-bar=""></div>␊
-<span·data-foo=""·data-bar=""></div>␊
+<b·data-foo=""␊
+··data-bar=""></b>␊
+<div·data-foo=""␊
+··data-bar=""></div>␊
+<span·data-foo=""␊
+··data-bar=""></div>␊
 ␊
-<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
+··<input·class="input·is-small"␊
+····type="text"␊
+····v-model="domainFilter"␊
+····placeholder="search">␊
 ␊
-<input·type="hidden"·name="theName"·value="">␊
+··<input·type="hidden"␊
+····name="theName"␊
+····value="">
\ No newline at end of file

🔧 "force-aligned"

Using JS-Beautify beautifier:

<b·data-foo=""␊
···data-bar=""></b>␊
<div·data-foo=""␊
·····data-bar=""></div>␊
<span·data-foo=""␊
······data-bar=""></div>␊
␊
··<input·class="input·is-small"␊
·········type="text"␊
·········v-model="domainFilter"␊
·········placeholder="search">␊
␊
··<input·type="hidden"␊
·········name="theName"␊
·········value="">

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

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "wrap_attributes": "force-aligned",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: force-aligned
===================================================================
--- force-aligned   Original
+++ force-aligned   Beautified
@@ -1,7 +1,15 @@
-<b·data-foo=""·data-bar=""></b>␊
-<div·data-foo=""·data-bar=""></div>␊
-<span·data-foo=""·data-bar=""></div>␊
+<b·data-foo=""␊
+···data-bar=""></b>␊
+<div·data-foo=""␊
+·····data-bar=""></div>␊
+<span·data-foo=""␊
+······data-bar=""></div>␊
 ␊
-<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
+··<input·class="input·is-small"␊
+·········type="text"␊
+·········v-model="domainFilter"␊
+·········placeholder="search">␊
 ␊
-<input·type="hidden"·name="theName"·value="">␊
+··<input·type="hidden"␊
+·········name="theName"␊
+·········value="">
\ No newline at end of file

Add Handlebars Example

No example found. Please submit a Pull Request!

Add Liquid Example

No example found. Please submit a Pull Request!

Add Mustache Example

No example found. Please submit a Pull Request!

Edit XML Example

🚧 Original Code

<b·data-foo=""·data-bar=""></b>␊
<div·data-foo=""·data-bar=""></div>␊
<span·data-foo=""·data-bar=""></div>␊
␊
<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
␊
<input·type="hidden"·name="theName"·value="">␊

🔧 "auto"

Using JS-Beautify beautifier:

<b·data-foo=""·data-bar=""></b>␊
<div·data-foo=""·data-bar=""></div>␊
<span·data-foo=""·data-bar=""></div>␊
␊
··<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
␊
··<input·type="hidden"·name="theName"·value="">

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

{
  "XML": {
    "indent_size": 2,
    "indent_char": " ",
    "wrap_attributes": "auto",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: auto
===================================================================
--- auto    Original
+++ auto    Beautified
@@ -1,7 +1,7 @@
 <b·data-foo=""·data-bar=""></b>␊
 <div·data-foo=""·data-bar=""></div>␊
 <span·data-foo=""·data-bar=""></div>␊
 ␊
-<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
+··<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
 ␊
-<input·type="hidden"·name="theName"·value="">␊
+··<input·type="hidden"·name="theName"·value="">
\ No newline at end of file

🔧 "force"

Using JS-Beautify beautifier:

<b·data-foo=""␊
··data-bar=""></b>␊
<div·data-foo=""␊
··data-bar=""></div>␊
<span·data-foo=""␊
··data-bar=""></div>␊
␊
··<input·class="input·is-small"␊
····type="text"␊
····v-model="domainFilter"␊
····placeholder="search">␊
␊
··<input·type="hidden"␊
····name="theName"␊
····value="">

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

{
  "XML": {
    "indent_size": 2,
    "indent_char": " ",
    "wrap_attributes": "force",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: force
===================================================================
--- force   Original
+++ force   Beautified
@@ -1,7 +1,15 @@
-<b·data-foo=""·data-bar=""></b>␊
-<div·data-foo=""·data-bar=""></div>␊
-<span·data-foo=""·data-bar=""></div>␊
+<b·data-foo=""␊
+··data-bar=""></b>␊
+<div·data-foo=""␊
+··data-bar=""></div>␊
+<span·data-foo=""␊
+··data-bar=""></div>␊
 ␊
-<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
+··<input·class="input·is-small"␊
+····type="text"␊
+····v-model="domainFilter"␊
+····placeholder="search">␊
 ␊
-<input·type="hidden"·name="theName"·value="">␊
+··<input·type="hidden"␊
+····name="theName"␊
+····value="">
\ No newline at end of file

🔧 "force-aligned"

Using JS-Beautify beautifier:

<b·data-foo=""␊
···data-bar=""></b>␊
<div·data-foo=""␊
·····data-bar=""></div>␊
<span·data-foo=""␊
······data-bar=""></div>␊
␊
··<input·class="input·is-small"␊
·········type="text"␊
·········v-model="domainFilter"␊
·········placeholder="search">␊
␊
··<input·type="hidden"␊
·········name="theName"␊
·········value="">

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

{
  "XML": {
    "indent_size": 2,
    "indent_char": " ",
    "wrap_attributes": "force-aligned",
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: force-aligned
===================================================================
--- force-aligned   Original
+++ force-aligned   Beautified
@@ -1,7 +1,15 @@
-<b·data-foo=""·data-bar=""></b>␊
-<div·data-foo=""·data-bar=""></div>␊
-<span·data-foo=""·data-bar=""></div>␊
+<b·data-foo=""␊
+···data-bar=""></b>␊
+<div·data-foo=""␊
+·····data-bar=""></div>␊
+<span·data-foo=""␊
+······data-bar=""></div>␊
 ␊
-<input·class="input·is-small"·type="text"·v-model="domainFilter"·placeholder="search">␊
+··<input·class="input·is-small"␊
+·········type="text"␊
+·········v-model="domainFilter"␊
+·········placeholder="search">␊
 ␊
-<input·type="hidden"·name="theName"·value="">␊
+··<input·type="hidden"␊
+·········name="theName"␊
+·········value="">
\ No newline at end of file

← UnformattedWrap Attributes Indent Size →
  • 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