Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent VS Code from breaking up long HTML lines into multiple lines?

When my elements with attributes get long, VS Code seems to break the line up into multiple lines:

enter image description here

(I would like three lines here instead of seven, one line per element)

I am using prettier for formatting, and have set the printWidth option which works in javascript code, but for HTML it seems to be overridden by VS Code.

I´ve tried fiddling around with the wrapAttributes and the html.format.wrapLineLength settings, but none of those seem to have any effect.

How to deal with this matter?

UPDATE:

Thanks alot for your answers. I havent been notified by them, so sorry for not taking action.

I´ve tried all of your suggestions, but the problem remains the same. This is my current config based on your suggestions.

settings.json:

"html.format.wrapLineLength": 0, "html.format.enable": false, "html.format.wrapAttributes": "auto",   "vetur.format.defaultFormatterOptions": {     "prettyhtml": {         "printWidth": 300,         "singleQuote": false,         "wrapAttributes": false,         "sortAttributes": false     } } 

.prettierrc.json:

{   "semi": true,   "trailingComma": "none",   "singleQuote": true,   "printWidth": 300,     "tabWidth": 2,     "useTabs": true,     "jsxBracketSameLine": true } 
like image 275
Farsen Avatar asked May 13 '19 12:05

Farsen


People also ask

How do you stop prettier in VS Code splitting attributes onto multiple lines?

A quick fix is to go to Prettier Extension Settings (ctrl + shift + X) and in Prettier Extension Settings search for "Print Width" set it to 250 or anything that works for you. 2: Change the value of Print Width to your liking. To disable format code on save.

How do you write more than one line at the same time VS Code?

Select the lines you want and then press: Windows: Shift + Alt + i. Mac: shift + option + i.

How do you remove spaces from multiple lines in VS Code?

You can select all and use SHIFT + TAB to unindent. Show activity on this post. =>for multiline at same time you can use Shift + Alt + Up/Down arrow key then edit your code or remove/add space.

How to handle line breaks in CSS?

Each one will handle line breaks differently: the first will break text in the default manner while the second and third will force the text not to create a newline and break. First, create and open a new file called main.css using nano or your preferred editor:

How to prevent a long word breaking a Div using CSS?

CSS Selectors are part of a CSS rule set used for selecting the content you want to style. </div> </body> </html> This is an example.This is some example with veryyyyyyyyyyyyyyyyyyyyyyyy­Longword. Another way of preventing a long word breaking a <div> is using the HTML <wbr> tag.

How to keep text on the same line in CSS?

But there are times when you want blocks of text to stay on the same line, regardless of length. You can prevent line breaks and text wrapping for specific elements using the CSS white-space property.

How do I prevent line breaks and text wrapping?

You can prevent line breaks and text wrapping for specific elements using the CSS white-space property. In this tutorial, you will style the same block of text four different ways, first with line breaks and then three times without line breaks: Medusafish banded killifish convict blenny saury threadsail beluga sturgeon.


Video Answer


1 Answers

You can add "html.format.wrapLineLength": 0 in settings.json.

like image 102
FranCarstens Avatar answered Sep 22 '22 17:09

FranCarstens