I'm using prettier to format my Vue files, but can't find to seem a setting that puts props/attributes of html elements to new lines.
I'd like to make sure that my code is always formatted as it is for v-text-fieldin a yellow frame, rather than below. I set Prose Wrap to "never", but I guess that was not it. Any help appreciated!
You can set the setting of Print Width to higher value.
That's what Prettier does: breaks lines if they get too long. It doesn't make sense to use Prettier if you don't need its line-breaking behavior as this behavior and Prettier are one and the same.
Related
I'd like to keep some space between some html blocks in my code. However, Prettier wants to remove these lines. Is there a Prettier setting to keep this spacing?
Before prettier:
<template>
<form>
<div>First block</div>
<div>Second block</div>
</form>
</template>
After pretter:
<template>
<form>
<div>First block</div>
<div>Second block</div>
</form>
</template>
There is no way to actually do this, you might only use tricks.
First trick
Ignore completely the file (or file extensions) but you will not benefit from Prettier
Second trick
Deny Prettier to trim whitespaces
trim_trailing_whitespace = true
And add whitespaces in line breaks.
Once again this is not an effective solution, it's only a trick.
An issue has been closed by devs
adding and removing line breaks is core to prettier's formatting algorithm
According to #suchipi , Github member:
adding and removing line breaks is core to prettier's formatting algorithm, so preserving them isn't consistently possible.
As a work around you can try:
setting very short printWidth
put // prettier-ignore comment above your code.
For Refernce:
Github issue
Is there a config in prettier to keep line breaks?
Don't know if this will work as intended however, in the document for Prettier, there is a section for "Empty Line" that says;
"Prettier collapses multiple blank lines into a single blank line."
By this, you may want to add a double blank line instead of a single blank, where you are wanting a space to be, as it should compress it into a single line rather than removing it all together.
Take a look on this thread https://github.com/prettier/prettier/issues/4870, it's pretty good explaining why this is still non-existing feature.
There is no simple way for formatter to determine what to keep and what to remove.
So the only practical things you can do
Add comments to disable formatting in certain places (which is bad idea and never work well, dev gents become annoyed with this super quickly).
Accept that empty lines would be collapsed (still bad, because of poor readability)
Disable this feature and maintain empty lines yourself (alternative editor). This one "arguably" seems to me the simplest (best) option in a long-term.
I have a long text in p tag and Prettier splits the text in this tag to multiple lines. I have 'word wrap' enabled.
How can I stop this from happening?
Before Save:
After Save:
Prettier is opinionated, it has only limited number of options.
If you couldn’t find what you want in https://prettier.io/docs/en/options.html, so it’s not supported.
In general, better to accept Prettier behavior instead of fight against it.
The reformatting, that prettier does, doesn’t harm.
You can try to increase width.
Im not using any plugins for breaking my code, i think it's an integrated function. This problem is now since a few weeks and it's driving me crazy pasting code and then putting every line back.
Here is a screenshot of my code (i just copied this line):
https://imgur.com/YOdfM2u
Here is a screenshot of my code (i pasted it):
https://imgur.com/1AfzNIH
Why is my vscode breaking the lines everytime?
Thanks in advance for your help, i really apreciate it
This is the default formatter wrapping text (or trying to) at the default of 80 columns.
If you want to override this, you can do so by adding this line to your settings.json file:
"html.format.wrapLineLength": 0
If you prefer to change your settings from the GUI instead of the json file, open the command palette and open the settings from there. Once in it, look for "HTML format wrap line length" in the search box and change the value to 0.
You find a shortcut to the settings here too:
VS Code is stacking element attributes when I format HTML files. Is there any way to disable this?
The default setting for this is:
"html.format.wrapAttributes": "auto"
With "auto" meaning:
Wrap attributes only when line length is exceeded.
The line length is defined in a different setting and defaults to 120:
// Maximum amount of characters per line (0 = disable).
"html.format.wrapLineLength": 120
So setting "html.format.wrapLineLength" to 0 should give you the desired behavior.
This worked for me.
In your "Settings.json" file add the line
"prettier.printWidth": 300
How to debug this issue:
Click on HTML
Notice the force option, but also take a look a Wrap Line Length.
Test there to achieve desired results, but...
Test the HTML Formatting First
Open document to edit and right click to format.
Choose the HTML Formatter
Now go back and test each of your other formatters, such as Prettier and TidyHTML etc.
What seemed to work for me was changing the default 120 wrap line length to another value. I tried 0 and still had same problem, but for some odd reason a value of 20 worked. I don't understand why, it just worked.
I'm trying to get something like:
someObject.firstFunctionCall().secondFunctionCall().thirdFunctionCall();
to look like:
someObject.firstFunctionCall()
.secondFunctionCall()
.thirdFunctionCall()
I played around with the formatting editor and tried searching to no avail. I just can't think of the name for multiple function calls in one statement. I can do it myself but then it reverts to the top example every time I run the formatter.
You'll have to format it yourself.
To configure the formatter to not rewrap already wrapped lines, you can select this option in the "Line Wrapping" section of the formatter:
Never join already wrapped lines
Though it will change the indentation of the two lines.