Edit

JSX Brackets

Config Key: jsx_brackets

Description: Put the > of a multi-line JSX element at the end of the last line

Available since version: 0.7.0 (Current: )

Type: boolean

Default: false

Support

Edit Beautifiers

Languages: JSX, JavaScript, TypeScript

Beautifiers: Prettier

Comparison Table

Language	Prettier
JSX	✅
JavaScript	✅
TypeScript	✅

Examples

Select Language:

JSX * JavaScript * TypeScript *

Invisible characters are shown with the following symbols:

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

Edit JSX Example

🚧 Original Code

<div␊
className="HelloWorld"␊
title={`You·are·visitor·number·${num}`}␊
onMouseOver={onMouseOver}␊
>␊
····hello·world␊
</div>

🔧 true

Using Prettier beautifier:

<div␊
··className="HelloWorld"␊
··title={`You·are·visitor·number·${num}`}␊
··onMouseOver={onMouseOver}>␊
··hello·world␊
</div>;␊

How to configure

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,7 +1,6 @@
 <div␊
-className="HelloWorld"␊
-title={`You·are·visitor·number·${num}`}␊
-onMouseOver={onMouseOver}␊
->␊
-····hello·world␊
-</div>
\ No newline at end of file
+··className="HelloWorld"␊
+··title={`You·are·visitor·number·${num}`}␊
+··onMouseOver={onMouseOver}>␊
+··hello·world␊
+</div>;␊

🔧 false

Using Prettier beautifier:

<div␊
··className="HelloWorld"␊
··title={`You·are·visitor·number·${num}`}␊
··onMouseOver={onMouseOver}␊
>␊
··hello·world␊
</div>;␊

How to configure

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

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,7 +1,7 @@
 <div␊
-className="HelloWorld"␊
-title={`You·are·visitor·number·${num}`}␊
-onMouseOver={onMouseOver}␊
+··className="HelloWorld"␊
+··title={`You·are·visitor·number·${num}`}␊
+··onMouseOver={onMouseOver}␊
\ No newline at end of file
 >␊
-····hello·world␊
-</div>
+··hello·world␊
+</div>;␊

Edit JavaScript Example

🚧 Original Code

<div␊
className="HelloWorld"␊
title={`You·are·visitor·number·${num}`}␊
onMouseOver={onMouseOver}␊
>␊
····hello·world␊
</div>

🔧 true

Using Prettier beautifier:

<div␊
··className="HelloWorld"␊
··title={`You·are·visitor·number·${num}`}␊
··onMouseOver={onMouseOver}>␊
··hello·world␊
</div>;␊

How to configure

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,7 +1,6 @@
 <div␊
-className="HelloWorld"␊
-title={`You·are·visitor·number·${num}`}␊
-onMouseOver={onMouseOver}␊
->␊
-····hello·world␊
-</div>
\ No newline at end of file
+··className="HelloWorld"␊
+··title={`You·are·visitor·number·${num}`}␊
+··onMouseOver={onMouseOver}>␊
+··hello·world␊
+</div>;␊

🔧 false

Using Prettier beautifier:

<div␊
··className="HelloWorld"␊
··title={`You·are·visitor·number·${num}`}␊
··onMouseOver={onMouseOver}␊
>␊
··hello·world␊
</div>;␊

How to configure

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

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,7 +1,7 @@
 <div␊
-className="HelloWorld"␊
-title={`You·are·visitor·number·${num}`}␊
-onMouseOver={onMouseOver}␊
+··className="HelloWorld"␊
+··title={`You·are·visitor·number·${num}`}␊
+··onMouseOver={onMouseOver}␊
\ No newline at end of file
 >␊
-····hello·world␊
-</div>
+··hello·world␊
+</div>;␊

Edit TypeScript Example

🚧 Original Code

<div␊
className="HelloWorld"␊
title={`You·are·visitor·number·${num}`}␊
onMouseOver={onMouseOver}␊
>␊
····hello·world␊
</div>

🔧 true

Using Prettier beautifier:

<div␊
··className="HelloWorld"␊
··title={`You·are·visitor·number·${num}`}␊
··onMouseOver={onMouseOver}>␊
··hello·world␊
</div>;␊

How to configure

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

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

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,7 +1,6 @@
 <div␊
-className="HelloWorld"␊
-title={`You·are·visitor·number·${num}`}␊
-onMouseOver={onMouseOver}␊
->␊
-····hello·world␊
-</div>
\ No newline at end of file
+··className="HelloWorld"␊
+··title={`You·are·visitor·number·${num}`}␊
+··onMouseOver={onMouseOver}>␊
+··hello·world␊
+</div>;␊

🔧 false

Using Prettier beautifier:

<div␊
··className="HelloWorld"␊
··title={`You·are·visitor·number·${num}`}␊
··onMouseOver={onMouseOver}␊
>␊
··hello·world␊
</div>;␊

How to configure

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

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

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,7 +1,7 @@
 <div␊
-className="HelloWorld"␊
-title={`You·are·visitor·number·${num}`}␊
-onMouseOver={onMouseOver}␊
+··className="HelloWorld"␊
+··title={`You·are·visitor·number·${num}`}␊
+··onMouseOver={onMouseOver}␊
\ No newline at end of file
 >␊
-····hello·world␊
-</div>
+··hello·world␊
+</div>;␊