Or Assayag
Or Assayag

Reputation: 6336

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").

Upvotes: 3

Views: 1455

Answers (2)

Tristan
Tristan

Reputation: 3578

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.

Upvotes: 1

quiqs
quiqs

Reputation: 118

You can change format settings in VS Code's settings.json file. By default, head, body and html tags include a newline before them. If some issues started happening only after installing an extension, then there may be conflicting settings.

Upvotes: 2

Related Questions