#Layout

Reordering attributes can break the original line layout of a tag. The layout section of a profile defines how tags are laid out afterwards. Each rule mirrors an eslint-plugin-vue rule, so projects that keep those rules get consistent results.

Both built-in profiles turn all of these rules on.

#closingBracketNewline

Equivalent to vue/html-closing-bracket-newline. The closing bracket of a multiline start tag goes on its own line. A start tag whose attributes fit on one line keeps > on that line (singleline: never).

#oneAttributePerLine

Equivalent to the multiline default of vue/max-attributes-per-line. In a start tag whose attributes span several lines, each attribute goes on its own line.

This is needed because reordering could otherwise put two attributes on one line if attributes kept their original line positions.

<!-- Input -->
<div class="a"
  id="x"></div>

<!-- Output -->
<div
  id="x"
  class="a"
></div>

#selfClosing

Equivalent to vue/html-self-closing. Set per element kind, each to always, never or preserve:

• normal and component apply in Vue templates only. In plain HTML, <div /> is an unclosed start tag.
• Whitespace-only content counts as empty, except in pre and textarea.
• SFC top-level blocks (<template>, <script>, <style>) are never touched.

#contentNewline

Equivalent to vue/multiline-html-element-content-newline. Omit the key to turn the rule off. {} turns it on with the defaults.

• An element is multiline when its end tag starts on a later line than its start tag (the ESLint rule's definition). Its content then starts and ends with exactly one line break.
• allowEmptyLines: true keeps blank lines instead of collapsing them.
• Empty elements are left alone.
• ignore lists elements that are left alone, together with everything inside them. The default is the rule's default: pre, textarea and inline elements (a, span, strong, …), where added whitespace could be visible.
• Unclosed HTML elements (<li> without </li>) are closed implicitly by an ancestor's end tag and are not touched.
• Only line breaks are added; indentation is not re-flowed. The new line takes the attribute indentation of a multiline start tag, else the first deeper content line, else the tag's indentation plus two spaces (a tab if the tag is indented with tabs).

<!-- Input -->
<template>
  <div class="a"
    id="x"><MyComp></MyComp></div>
</template>

<!-- Output (vue profile) -->
<template>
  <div
    id="x"
    class="a"
  >
    <MyComp />
  </div>
</template>

The rule is also on in the HTML profile. Whitespace at the start and end of block-level content is not rendered, and the ignore list covers the elements where it could be.

Moving content to a new line can change the indentation that a nested tag's closing bracket aligns to. annealer therefore formats the document again until it is stable (at most 4 passes, normally 2).