Unibeautify
  • Install
  • Docs
  • Assistant
  • Playground
  • GitHub

›B

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

Break Chained Methods

Config Key: break_chained_methods

Description: Break chained method calls across subsequent lines

Available since version: 0.7.0 (Current: npm)

Type: boolean

Default: false

Support

Edit Beautifiers

Languages: C#, EJS, JSX, Java, JavaScript, Riot, Swig, Twig, TypeScript

Beautifiers: JS-Beautify, Pretty Diff, ESLint

Comparison Table

LanguageJS-BeautifyPretty DiffESLint
C#❌✅❌
EJS✅✅❌
JSX✅✅✅
Java❌✅❌
JavaScript✅✅✅
Riot❌✅❌
Swig❌✅❌
Twig❌✅❌
TypeScript❌✅❌

Examples

Invisible characters are shown with the following symbols:

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

Edit C# Example

🚧 Original Code

using·System;␊
␊
class·Program␊
{␊
static·void·Main()␊
{␊
ui().s2p().mm().supplinvoice().manage().util().Constants().blabla();␊
}␊
}␊

🔧 true

Using Pretty Diff beautifier:

using·System;␊
␊
class·Program·{␊
··static·void·Main()·{␊
····ui()␊
······.s2p()␊
······.mm()␊
······.supplinvoice()␊
······.manage()␊
······.util()␊
······.Constants()␊
······.blabla();␊
··}␊
}␊

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

{
  "C#": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,9 +1,14 @@
 using·System;␊
 ␊
-class·Program␊
-{␊
-static·void·Main()␊
-{␊
-ui().s2p().mm().supplinvoice().manage().util().Constants().blabla();␊
+class·Program·{␊
+··static·void·Main()·{␊
+····ui()␊
+······.s2p()␊
+······.mm()␊
+······.supplinvoice()␊
+······.manage()␊
+······.util()␊
+······.Constants()␊
+······.blabla();␊
+··}␊
 }␊
-}␊

🔧 false

Using Pretty Diff beautifier:

using·System;␊
␊
class·Program·{␊
··static·void·Main()·{␊
····ui().s2p().mm().supplinvoice().manage().util().Constants().blabla();␊
··}␊
}␊

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

{
  "C#": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,9 +1,7 @@
 using·System;␊
 ␊
-class·Program␊
-{␊
-static·void·Main()␊
-{␊
-ui().s2p().mm().supplinvoice().manage().util().Constants().blabla();␊
+class·Program·{␊
+··static·void·Main()·{␊
+····ui().s2p().mm().supplinvoice().manage().util().Constants().blabla();␊
+··}␊
 }␊
-}␊

Add EJS Example

No example found. Please submit a Pull Request!

Edit JSX Example

🚧 Original Code

foo.bar().baz();␊
␊
this.$("#fileName").val().addClass("disabled")␊
····.prop("disabled",·true)␊
␊
function·doStuff()·{␊
if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
return·false;␊
}␊
}␊

🔧 true

Using JS-Beautify beautifier:

foo.bar()␊
··.baz();␊
␊
this.$("#fileName")␊
··.val()␊
··.addClass("disabled")␊
··.prop("disabled",·true)␊
␊
function·doStuff()·{␊
··if·(oParameters.State·!==·ui()␊
····.s2p()␊
····.mm()␊
····.supplinvoice()␊
····.manage()␊
····.util()␊
····.Constants()␊
····.blabla())·{␊
····return·false;␊
··}␊
}

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

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": true,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,10 +1,20 @@
-foo.bar().baz();␊
+foo.bar()␊
+··.baz();␊
 ␊
-this.$("#fileName").val().addClass("disabled")␊
-····.prop("disabled",·true)␊
+this.$("#fileName")␊
+··.val()␊
+··.addClass("disabled")␊
+··.prop("disabled",·true)␊
 ␊
 function·doStuff()·{␊
-if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
-return·false;␊
-}␊
-}␊
+··if·(oParameters.State·!==·ui()␊
+····.s2p()␊
+····.mm()␊
+····.supplinvoice()␊
+····.manage()␊
+····.util()␊
+····.Constants()␊
+····.blabla())·{␊
+····return·false;␊
+··}␊
+}
\ No newline at end of file

🔧 false

Using JS-Beautify beautifier:

foo.bar().baz();␊
␊
this.$("#fileName").val().addClass("disabled")␊
··.prop("disabled",·true)␊
␊
function·doStuff()·{␊
··if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
····return·false;␊
··}␊
}

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

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": false,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,10 +1,10 @@
 foo.bar().baz();␊
 ␊
 this.$("#fileName").val().addClass("disabled")␊
-····.prop("disabled",·true)␊
+··.prop("disabled",·true)␊
 ␊
 function·doStuff()·{␊
-if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
-return·false;␊
-}␊
-}␊
+··if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
+····return·false;␊
+··}␊
+}
\ No newline at end of file

Edit Java Example

🚧 Original Code

public·class·HelloWorld·{␊
␊
····public·static·void·main(String[]·args)·{␊
········//·Prints·"Hello,·World"·to·the·terminal·window.␊
········System.out.println("Hello,·World");␊
␊
········This.is.a.really.really.very.extremely.terrible.unbearably.long.method.chain("Hello,·World");␊
␊
····}␊
␊
}␊

🔧 true

Using Pretty Diff beautifier:

public·class·HelloWorld·{␊
␊
··public·static·void·main(String[]·args)·{␊
····//·Prints·"Hello,·World"·to·the·terminal·window.␊
····System␊
······.out␊
······.println("Hello,·World");␊
␊
····This␊
······.is␊
······.a␊
······.really␊
······.really␊
······.very␊
······.extremely␊
······.terrible␊
······.unbearably␊
······.long␊
······.method␊
······.chain("Hello,·World");␊
␊
··}␊
␊
}␊

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

{
  "Java": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,11 +1,24 @@
 public·class·HelloWorld·{␊
 ␊
-····public·static·void·main(String[]·args)·{␊
-········//·Prints·"Hello,·World"·to·the·terminal·window.␊
-········System.out.println("Hello,·World");␊
+··public·static·void·main(String[]·args)·{␊
+····//·Prints·"Hello,·World"·to·the·terminal·window.␊
+····System␊
+······.out␊
+······.println("Hello,·World");␊
 ␊
-········This.is.a.really.really.very.extremely.terrible.unbearably.long.method.chain("Hello,·World");␊
+····This␊
+······.is␊
+······.a␊
+······.really␊
+······.really␊
+······.very␊
+······.extremely␊
+······.terrible␊
+······.unbearably␊
+······.long␊
+······.method␊
+······.chain("Hello,·World");␊
 ␊
-····}␊
+··}␊
 ␊
 }␊

🔧 false

Using Pretty Diff beautifier:

public·class·HelloWorld·{␊
␊
··public·static·void·main(String[]·args)·{␊
····//·Prints·"Hello,·World"·to·the·terminal·window.␊
····System.out.println("Hello,·World");␊
␊
····This.is.a.really.really.very.extremely.terrible.unbearably.long.method.chain("Hello,·World");␊
␊
··}␊
␊
}␊

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

{
  "Java": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,11 +1,11 @@
 public·class·HelloWorld·{␊
 ␊
-····public·static·void·main(String[]·args)·{␊
-········//·Prints·"Hello,·World"·to·the·terminal·window.␊
-········System.out.println("Hello,·World");␊
+··public·static·void·main(String[]·args)·{␊
+····//·Prints·"Hello,·World"·to·the·terminal·window.␊
+····System.out.println("Hello,·World");␊
 ␊
-········This.is.a.really.really.very.extremely.terrible.unbearably.long.method.chain("Hello,·World");␊
+····This.is.a.really.really.very.extremely.terrible.unbearably.long.method.chain("Hello,·World");␊
 ␊
-····}␊
+··}␊
 ␊
 }␊

Edit JavaScript Example

🚧 Original Code

foo.bar().baz();␊
␊
this.$("#fileName").val().addClass("disabled")␊
····.prop("disabled",·true)␊
␊
function·doStuff()·{␊
if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
return·false;␊
}␊
}␊

🔧 true

Using JS-Beautify beautifier:

foo.bar()␊
··.baz();␊
␊
this.$("#fileName")␊
··.val()␊
··.addClass("disabled")␊
··.prop("disabled",·true)␊
␊
function·doStuff()·{␊
··if·(oParameters.State·!==·ui()␊
····.s2p()␊
····.mm()␊
····.supplinvoice()␊
····.manage()␊
····.util()␊
····.Constants()␊
····.blabla())·{␊
····return·false;␊
··}␊
}

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

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": true,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,10 +1,20 @@
-foo.bar().baz();␊
+foo.bar()␊
+··.baz();␊
 ␊
-this.$("#fileName").val().addClass("disabled")␊
-····.prop("disabled",·true)␊
+this.$("#fileName")␊
+··.val()␊
+··.addClass("disabled")␊
+··.prop("disabled",·true)␊
 ␊
 function·doStuff()·{␊
-if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
-return·false;␊
-}␊
-}␊
+··if·(oParameters.State·!==·ui()␊
+····.s2p()␊
+····.mm()␊
+····.supplinvoice()␊
+····.manage()␊
+····.util()␊
+····.Constants()␊
+····.blabla())·{␊
+····return·false;␊
+··}␊
+}
\ No newline at end of file

🔧 false

Using JS-Beautify beautifier:

foo.bar().baz();␊
␊
this.$("#fileName").val().addClass("disabled")␊
··.prop("disabled",·true)␊
␊
function·doStuff()·{␊
··if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
····return·false;␊
··}␊
}

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

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": false,
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,10 +1,10 @@
 foo.bar().baz();␊
 ␊
 this.$("#fileName").val().addClass("disabled")␊
-····.prop("disabled",·true)␊
+··.prop("disabled",·true)␊
 ␊
 function·doStuff()·{␊
-if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
-return·false;␊
-}␊
-}␊
+··if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
+····return·false;␊
+··}␊
+}
\ No newline at end of file

Add Riot Example

No example found. Please submit a Pull Request!

Add Swig Example

No example found. Please submit a Pull Request!

Add Twig Example

No example found. Please submit a Pull Request!

Edit TypeScript Example

🚧 Original Code

foo.bar().baz();␊
␊
this.$("#fileName").val().addClass("disabled")␊
····.prop("disabled",·true)␊
␊
function·doStuff()·{␊
if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
return·false;␊
}␊
}␊

🔧 true

Using Pretty Diff beautifier:

foo␊
··.bar()␊
··.baz();␊
␊
this␊
··.$("#fileName")␊
··.val()␊
··.addClass("disabled")␊
··.prop("disabled",·true)␊
␊
function·doStuff()·{␊
··if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
····return·false;␊
··}␊
}␊

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

{
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": true,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,10 +1,15 @@
-foo.bar().baz();␊
+foo␊
+··.bar()␊
+··.baz();␊
 ␊
-this.$("#fileName").val().addClass("disabled")␊
-····.prop("disabled",·true)␊
+this␊
+··.$("#fileName")␊
+··.val()␊
+··.addClass("disabled")␊
+··.prop("disabled",·true)␊
 ␊
 function·doStuff()·{␊
-if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
-return·false;␊
+··if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
+····return·false;␊
+··}␊
 }␊
-}␊

🔧 false

Using Pretty Diff beautifier:

foo.bar().baz();␊
␊
this.$("#fileName").val().addClass("disabled").prop("disabled",·true)␊
␊
function·doStuff()·{␊
··if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
····return·false;␊
··}␊
}␊

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

{
  "TypeScript": {
    "indent_size": 2,
    "indent_char": " ",
    "break_chained_methods": false,
    "beautifiers": [
      "Pretty Diff"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,10 +1,9 @@
 foo.bar().baz();␊
 ␊
-this.$("#fileName").val().addClass("disabled")␊
-····.prop("disabled",·true)␊
+this.$("#fileName").val().addClass("disabled").prop("disabled",·true)␊
 ␊
 function·doStuff()·{␊
-if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
-return·false;␊
+··if·(oParameters.State·!==·ui().s2p().mm().supplinvoice().manage().util().Constants().blabla())·{␊
+····return·false;␊
+··}␊
 }␊
-}␊

← Brace StyleComma First →
  • 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