[Vuejs]-How to keep the </a> closing tag on same line and all the others in new line in a Vue.js project?

by

0👍

✅

The issue is with the whitespace-sensitive formatting.
This attribute htmlWhitespaceSensitivity accept the following options:

  • "css" – Respect the default value of CSS display property. For Handlebars treated same as strict. "Default"
  • "strict" – Whitespace (or the lack of it) around all tags is considered significant.
  • "ignore" – Whitespace (or the lack of it) around all tags is considered insignificant.

You can fix it by adding the following rule to your .eslintrc.js file (rules section):

"prettier/prettier": [
  "warn",
  {
    htmlWhitespaceSensitivity: "strict"
  }
]

It would consider the whitespace "significant" for all cases. That means:

<!-- input -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<div class="voluptatem architecto at">Architecto rerum architecto incidunt sint.</div>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.</div>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div>

<!-- output -->
<span class="dolorum atque aspernatur"
  >Est molestiae sunt facilis qui rem.</span
>
<div class="voluptatem architecto at"
  >Architecto rerum architecto incidunt sint.</div
>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.</div
>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div> <!-- in this case you would have the whitespace -->

It looks ugly as it puts the </div at the end of the string and > the next line. But it solves the problem.

You can read more about it here:
https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
And here is an old Github issue on prettier stating the same as you mentioned here:
https://github.com/prettier/prettier/issues/6290

0👍

Just do this:

  <a href="#"
     place="linkText"
     target="_blank">
    lorum ipsum</a>

0👍

  • Use Ctrl + , on Windows (or CMD + , on Mac) to open your editors settings.
  • Search for HTML closing bracket, and you will be presented with a screen that looks like the image attached. image attached

If it is unchecked, you can go ahead and check it.
What this setting does is add the closing bracket on the same line as the last letter as opposed to dropping it to the next line where it sits alone, as you are currently experiencing.

You can also edit it in your settings.json file like the below:

"prettier.bracketSameLine": true

If you want to have access to even more brackets setting options. You can search for bracket in your VS code user setting and play around with the options.

Leave a comment