How to disable prettier settings creating new line of > of html tag?

Question

I walk through the Prettier extension of Vscode and I can't find how to disable this scenario. See the > of html tag.

Here's a sample code that needed some fix, every time i run the Prettier. The output is this:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr"
>
</tag-html>

I want Prettier to output:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr">
</tag-html>

Solution 1

This can be done with help of VS Code itself. Place the following entry in your workspace settings in your vs code.

"html.format.wrapAttributes": "force-aligned"

You don't need any external plugins or extension to do this.

Or you can use the GUI settings page as well

UPDATE 01

Based on github issue in prettier repo https://github.com/prettier/prettier-vscode/issues/646

you can still merge the settings I have mentioned above.

Solution 2

For JSX (and other file types, like HTML) this can be done setting

"bracketSameLine": true

in your .prettierrc

see https://prettier.io/docs/en/options.html#bracket-line

(or jsxBracketSameLine for versions < 4.2.0)

Comments

[rosiejaneenomar]

hi, thank you for the answer, I worked when not using prettier, but I need the extension as it is being used already on the project.

[Chris]

This is a poor answer as it doesn't address the question. I came here from Google looking for the prettier solution as I don't use VS Code.

[Pandiyan Cool]

@ChrisTurner It might not answer your question. But answered the real question, and question-asker accepted the answer at that time (2018). If you really have any specific questions, please raise - happy to answer if possible.

[Ярослав Прохоров]

i take "html.format.wrapAttributes": "force-aligned" - nothing has changed, sign ">" transfer, what need check more?

[Sean Kendle]

"you can still merge the settings" - you linked to a very, very long thread that I don't have time to read. How can you merge settings? I just tried setting that setting, and it changes nothing. Merge how?

[styks]

This is deprecated as of 4.2.0. Replaced with bracketSameLine

[KTibow]

I also needed to add htmlWhitespaceSensitivity: ignore in order for it to work.

[xji]

@styks Your answer helped my project work again. I think older versions of React Native new project templates still use the old jsxBracketSameLine key and it therefore stopped working after I updated my Prettier. IMO they should have deprecated it but not removed it.

[Ali Hajiloo]

worked for me, thanks a lot. mark it to correct answer.