I'm using VS Code, and Prettier and cannot get it to format the way I want it to be upon saving.
If I have a line like
<input type="checkbox" /> Label<br />
upon format/save, it becomes
<input type="checkbox" />
Label
<br />
I don't want to turn off Format on Save since I want to be able to Format Document from time-to-time. Is there a setting to get the line breaks how I want them? I'd prefer it only wrap on line length and other wanted places (e.g. select and option tags on different lines)
Note: this is just a simplified example. There are many other cases where it's putting every tag on a separate line when I'd like them to stay on one.
You need to update your .prettierrc file in your root to have
"printWidth": 1000
or whatever print width you are looking to have and it should fix this. Also check out the Prettier docs at https://prettier.io/docs/en/configuration.html to see other items you can configure.
Related
If I have a bit of HTML, XML, or JSX formatted like this:
<p class="foo">
<b class="bar">
some text
</b>
<p>
I would like to be able to make a selection from <p> to </p>, run a command (ideally via an assigned keyboard shortcut), and have VSCode convert it to this:
<p class="foo"><b class="bar">some text</b><p>
As context, I sometimes need to process a fair amount of marked up text in a variety of file formats, and it's very tedious to manually do this kind of formatting (or unformatting). I know you can do it with a regex find and replace in selection, but that's inconvenient because (1) there doesn't seem to be an easy way to save a set of find/replace settings as a macro and then assign them to a keyboard shortcut, and (2) VSCode's handling of the "in selection" part of find/replace all confuses me every time I use it.
I used to do this in my previous editors (e.g. BBEdit, TextMate, Sublime), but I'm hitting a wall with VSCode. The best I can find is minify/uglify extensions that work on entire files. And tons of basic tips about toggling word wrap, automatically removing trailing whitespace, etc.
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'm looking for a setting or extension in VSCode that provides the following functionality:
Format on save
wrap html attributes on their own line, even if there is only one attribute
put closing symbol of opening tag on new line, aligned with tag
alphabetically order attributes
do not align attributes according to the position of the first attribute, simple use one level of indentation
Example 1:
<span my-attr="value">Hello, world!</span>
becomes
<span
my-attr="value"
>
Hello, world!
</span>
Example 2:
<x-status-indicator wire:click="pushMe" class="block" :status="$status"
:description="$description" />
then becomes
<x-status-indicator
:description="$description"
:status="$status"
class="block"
wire:click="pushMe"
/>
So far there have been many posts about formatting, but I could not find a single post or extension that satisfies these requirements. Any suggestions would be greatly appreciated, thank you! :)
I've a problem with typo3 snowbabel extension. I need to insert a line break in frontend. In the manual, specified that "if you want to have a line break visible in front end, you'll have to insert the HTML line break tag.
I've added it. But the html br tag displayed in frontend.Also the line break is not working.
Is there any configurations for this?
Thanks,
Arun Chandran
This is just a handy quick solution to the problem.
You can use <section> tags instead of "<br/>" tags. Even though their purpose might be different, it still gives the output.
OR
Just use <br></br> instead of </br>. Works fine.
I'm using Eclipse (Juno). I have a form on a JSP page that has a textarea as follows:
<textarea name="t"><c:out value="${val}" /></textarea>
When I format the code (ctrl shift F) it becomes:
<textarea name="t">
<c:out value="${val}" />
</textarea>
Which is fine except that it inserts extra spaces and lines in the text area. I like formatting my code using Eclipse, but the spaces/lines get added to the database when the form is submitted. Even worse, it gets compounded every time that form is submitted again. What am I doing wrong?
Try adding "textarea" to the list of inline elements on the Web->HTML Files->Editor preference page.