Edit

Wrap Attributes Indent Size

Config Key: wrap_attributes_indent_size

Description: Indent wrapped attributes to after N characters

Available since version: 0.7.0 (Current: npm)

Type: integer

Default: 4

Support

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

🚧 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="">␊

🔧 0

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

Difference from original

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

🔧 2

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

Difference from original

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

🔧 4

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

Difference from original

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

🔧 6

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

Difference from original

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

🔧 8

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

Difference from original

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

← Wrap AttributesWrap Line Length →