Prevent new line in VS code after formatting

Question

I want the a tag to be in the same line of the li tag here. what setting do i need to change in VS code to fix it.

Answer 1

You need to install the Beautify plugin and create/edit the .jsbeautifyrc file with the settings you require.

The VSCodeBeautify file settings are here which include HTML options, see:

Setting = unformatted, Formatter = HTML, "a" for a link.

So install the plugin, then create the .jsbeautifyrc file and put it in the root of your working directory:

{
    "html": {
        "unformatted": ["a"] // List of tags that should not be reformatted
    }
}

Answer 2

VSCode has these settings:

// List of tags, comma separated, that shouldn't be reformatted. 'null' defaults to all tags listed at https://www.w3.org/TR/html5/dom.html#phrasing-content.

  "html.format.unformatted": "wbr",

// List of tags, comma separated, where the content shouldn't be reformatted. 'null' defaults to the 'pre' tag.

"html.format.contentUnformatted": "pre,code,textarea",

You want to add li to the second option:

"html.format.contentUnformatted": "pre,code,textarea,li",

[Alternatively you could just turn off all html formatting but you probably don't want that.]

// Enable/disable default HTML formatter

 "html.format.enable": false,