visual-studio-codejs-beautify

Visual Studio code beautify format issues

I'm using VS Code + js-beautify + Beautify css/sass/scss/less, and I'm facing couple of annoying issues when I format my code (don't know how to solve them):

  1. This is NOT how I want my background color to look.
    From:

     background-color: rgba(0, 0, 0, .0);

To:

    background-color: rgba(0,
    0,
    0,
    .0);

I want it to be format as one line (like "from").

  1. The "cursor" property is in different color
    enter image description here

  1. When I format my html code, there are line spaces in the body and the html.
    From:

     <!DOCTYPE html>
   <html lang="en">
    <head>
     <title>React App</title>
    </head>
    <body>
    <div id="root"></div>
   </body>
  </html>

To:
    <!DOCTYPE html>
      <html lang="en">

       <head>
        <title>React App</title>
       </head>

       <body>
       <div id="root"></div>
      </body>

     </html>

I want it to be formatted without any empty spaces (like "from").

Solution

  • While this is an old question, I was encountering the same issue and found the solution. In your VS Code settings.json, add the following to it:

    "html.format.extraLiners": "",

    By default nothing is there so it will default to html, body, /html. By setting it to nothing, it will give you the behavior you want.