Prevent new line in VS code after formatting

Viewed 5880

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.

4 Answers

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
    }
}

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,

If you have installed the extension JS-CSS-HTML Formatter, uninstall it.

This extension automatically adds a new line to <li> on save. It also has an independent config file, so that changing the vscode internal settings as mentioned in the other answers won't fix the problem caused by it.

VSCode by default does not add any new line to <li>

Go to File / Preference / SEttings and make a search: 'formatSelectionAsHtml' Formatter to use: js-beautify (in my case) Max amount of characters per line: 9999

Related