Edit

Remove Trailing Whitespace

Config Key: remove_trailing_whitespace

Description: Remove trailing whitespace

Available since version: 0.7.0 (Current: )

Type: boolean

Default: false

Support

Edit Beautifiers

Languages: CSS, JSX, JavaScript, Less, SCSS, Sass, SugarSS

Beautifiers: ESLint, stylelint

Comparison Table

Language	ESLint	stylelint
CSS	❌	✅
JSX	✅	❌
JavaScript	✅	❌
Less	❌	✅
SCSS	❌	✅
Sass	❌	✅
SugarSS	❌	✅

Examples

Select Language:

CSS * JSX * JavaScript * Less * SCSS * Sass * SugarSS *

Invisible characters are shown with the following symbols:

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

Edit CSS Example

🚧 Original Code

.class1·{··············␊
·color:·blue;··········␊
}······················␊
·······················

🔧 true

Using stylelint beautifier:

.class1·{␊
··color:·blue;␊
}␊

How to configure

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

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": true,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,4 +1,3 @@
-.class1·{··············␊
-·color:·blue;··········␊
-}······················␊
-·······················
\ No newline at end of file
+.class1·{␊
+··color:·blue;␊
+}␊

🔧 false

Using stylelint beautifier:

.class1·{··············␊
··color:·blue;··········␊
}␊

How to configure

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

{
  "CSS": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": false,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

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

Edit JSX Example

🚧 Original Code

//·comment·······␊
console.log("test");·········␊

🔧 true

Using ESLint beautifier:

//·comment␊
console.log("test");␊

How to configure

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

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": true,
    "beautifiers": [
      "ESLint"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,2 +1,2 @@
-//·comment·······␊
-console.log("test");·········␊
+//·comment␊
+console.log("test");␊

🔧 false

Using ESLint beautifier:

//·comment·······␊
console.log("test");·········␊

How to configure

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

{
  "JSX": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": false,
    "beautifiers": [
      "ESLint"
    ]
  }
}

Difference from original

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

Edit JavaScript Example

🚧 Original Code

//·comment·······␊
console.log("test");·········␊

🔧 true

Using ESLint beautifier:

//·comment␊
console.log("test");␊

How to configure

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

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": true,
    "beautifiers": [
      "ESLint"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,2 +1,2 @@
-//·comment·······␊
-console.log("test");·········␊
+//·comment␊
+console.log("test");␊

🔧 false

Using ESLint beautifier:

//·comment·······␊
console.log("test");·········␊

How to configure

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

{
  "JavaScript": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": false,
    "beautifiers": [
      "ESLint"
    ]
  }
}

Difference from original

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

Edit Less Example

🚧 Original Code

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

🔧 true

Using stylelint beautifier:

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

How to configure

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

{
  "Less": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": true,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,4 +1,4 @@
-@primary:··green;·······␊
-.section·{··············␊
-··@color:·primary;······␊
-}·······················␊
+@primary:··green;␊
+.section·{␊
+··@color:·primary;␊
+}␊

🔧 false

Using stylelint beautifier:

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

How to configure

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

{
  "Less": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": false,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

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

Edit SCSS Example

🚧 Original Code

nav·{·················␊
··ul·{················␊
····margin:·0;········␊
····padding:·0;·······␊
····list-style:·none;·␊
··}···················␊
}·····················

🔧 true

Using stylelint beautifier:

nav·{␊
··ul·{␊
····margin:·0;␊
····padding:·0;␊
····list-style:·none;␊
··}␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": true,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,7 +1,7 @@
-nav·{·················␊
-··ul·{················␊
-····margin:·0;········␊
-····padding:·0;·······␊
-····list-style:·none;·␊
-··}···················␊
-}·····················
\ No newline at end of file
+nav·{␊
+··ul·{␊
+····margin:·0;␊
+····padding:·0;␊
+····list-style:·none;␊
+··}␊
+}␊

🔧 false

Using stylelint beautifier:

nav·{·················␊
··ul·{················␊
····margin:·0;········␊
····padding:·0;·······␊
····list-style:·none;·␊
··}···················␊
}␊

How to configure

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

{
  "SCSS": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": false,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -3,5 +3,5 @@
 ····margin:·0;········␊
 ····padding:·0;·······␊
 ····list-style:·none;·␊
 ··}···················␊
-}·····················
\ No newline at end of file
+}␊

Edit Sass Example

🚧 Original Code

nav···················␊
··ul··················␊
····margin:·0·········␊
····padding:·0········␊
····list-style:·none··␊

🔧 true

Using stylelint beautifier:

nav␊
··ul␊
····margin:·0;ulmargin␊
padding:·0;␊
list-style:·none␊

How to configure

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

{
  "Sass": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": true,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,5 +1,5 @@
-nav···················␊
-··ul··················␊
-····margin:·0·········␊
-····padding:·0········␊
-····list-style:·none··␊
+nav␊
+··ul␊
+····margin:·0;ulmargin␊
+padding:·0;␊
+list-style:·none␊

🔧 false

Using stylelint beautifier:

nav···················␊
··ul··················␊
····margin:·0;ulmargin·········␊
padding:·0;········␊
list-style:·none··␊

How to configure

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

{
  "Sass": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": false,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,5 +1,5 @@
 nav···················␊
 ··ul··················␊
-····margin:·0·········␊
-····padding:·0········␊
-····list-style:·none··␊
+····margin:·0;ulmargin·········␊
+padding:·0;········␊
+list-style:·none··␊

Edit SugarSS Example

🚧 Original Code

a··························␊
··color:·blue··············␊

🔧 true

Using stylelint beautifier:

a␊
··color:·bluecolor␊

How to configure

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

{
  "SugarSS": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": true,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: true
===================================================================
--- true    Original
+++ true    Beautified
@@ -1,2 +1,2 @@
-a··························␊
-··color:·blue··············␊
+a␊
+··color:·bluecolor␊

🔧 false

Using stylelint beautifier:

a··························␊
··color:·bluecolor··············␊

How to configure

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

{
  "SugarSS": {
    "indent_size": 2,
    "indent_char": " ",
    "remove_trailing_whitespace": false,
    "beautifiers": [
      "stylelint"
    ]
  }
}

Difference from original

Index: false
===================================================================
--- false   Original
+++ false   Beautified
@@ -1,2 +1,2 @@
 a··························␊
-··color:·blue··············␊
+··color:·bluecolor··············␊