Configuration

Options name in this page are in camel case. If you're using markup_fmt as a Rust crate, please use snake case instead.

printWidth

The line width limitation that markup_fmt should (but not must) avoid exceeding. markup_fmt will try its best to keep line width less than this value, but it may exceed for some cases, for example, a very very long single word.

Default option is 80.

Example for 80

<script src="very-very-very-very-long-name.js" async defer></script>

Example for 40

<script
  src="very-very-very-very-long-name.js"
  async
  defer
></script>

useTabs

Specify use space or tab for indentation.

Default option is false.

indentWidth

Size of indentation. When enabled useTabs, this option may be disregarded, since only one tab will be inserted when indented once.

Default option is 2. This can't be zero.

Example for 2

<script
  src="very-very-very-very-long-name.js"
  async
  defer
></script>

Example for 4

<script
    src="very-very-very-very-long-name.js"
    async
    defer
></script>

lineBreak

Specify whether use \n (LF) or \r\n (CRLF) for line break.

Default option is "lf". Possible options are "lf" and "crlf".

quotes

Control the quotes of attribute value.

Possible options:

• "double": Use double quotes as possible. However if there're double quotes in strings, quotes will be kept as-is.
• "single": Use single quotes as possible. However if there're single quotes in strings, quotes will be kept as-is.

Default option is "double".

Example for "double"

<div class=""></div>

Example for "single"

<div class=''></div>

formatComments

Control whether whitespace should be inserted at the beginning and end of comments and comments should be indented properly or not.

When this option is set to false, comments contain leading or trailing whitespace will still be kept as-is.

Default option is false.

Example for false

<!--comments-->
<!-- comments -->
<!--very very very very very very very very very very very very very very very very long-->

will be formatted as its original input.

Example for true

<!-- comments -->
<!-- comments -->
<!--
  very very very very very very very very very very very very very very very very long
-->

scriptIndent

Control whether the code block in the <script> tag should be indented or not.

Default option is false.

This global option can be overridden for individual languages by the following options:

• html.scriptIndent
• vue.scriptIndent
• svelte.scriptIndent
• astro.scriptIndent

Example for false

<script>
const a = 0
</script>

Example for true

<script>
  const a = 0
</script>

styleIndent

Control whether the code block in the <style> tag should be indented or not.

Default option is false.

This global option can be overridden for individual languages by the following options:

• html.styleIndent
• vue.styleIndent
• svelte.styleIndent
• astro.styleIndent

Example for false

<style>
a { outline: none; }
</style>

Example for true

<style>
  a { outline: none; }
</style>

closingBracketSameLine

Control the closing bracket (>) of a multi-line element should come at the end of the last line or on the next line (with a line break).

Default option is false.

Example for false

<span
  class=""
  style=""
></span>

Example for true

<span
  class=""
  style=""></span>

closingTagLineBreakForEmpty

When there're no children in an element, this option controls whether to insert a line break before the closing tag or not.

Possible options:

• "always": Always insert a line break before the closing tag.
• "fit": Only insert a line break if it doesn't fit the printWidth option.
• "never": Don't insert a line break.

Default option is "fit".

Example for "always"

<div>
</div>
<div class="very-very-very-very-very-very-very-very-very-long-class-name">
</div>

Example for "fit"

<div></div>
<div class="very-very-very-very-very-very-very-very-very-long-class-name">
</div>

Example for "never"

<div></div>
<div class="very-very-very-very-very-very-very-very-very-long-class-name"></div>

maxAttrsPerLine

Control the maximum number of attributes in one line. If this option is unset, there won't be any limitations.

This option conflicts with preferAttrsSingleLine option.

Default option is null. This option can't be 0.

Example for null

<div data-a data-b data-c></div>

Example for 1

<div
  data-a
  data-b
  data-c
></div>

Example for 2

<div
  data-a data-b
  data-c
></div>

preferAttrsSingleLine

Control whether attributes should be put on single line when possible.

This option conflicts with maxAttrsPerLine option.

Default option is false.

Example for false

This <div> is short enough to be put on single line, but it won't because attributes in source code span multiple lines.

<div
  data-a
  data-b data-c
></div>

will be formatted as:

<div
  data-a
  data-b
  data-c
></div>

Example for true

This <div> is short enough so it will be put on single line though attributes span multiple lines in source code.

<div data-a
  data-b
  data-c></div>

will be formatted as:

<div data-a data-b data-c></div>

singleAttrSameLine

Control whether single attribute should be put on the same line with tag name.

Default option is true.

Example for false

Input:

<div class="app"></div>
<div
  class="app"
></div>

Output:

<div class="app"></div>
<div
  class="app"
></div>

Example for true

Input:

<div class="app"></div>
<div
  class="app"
></div>

Output:

<div class="app"></div>
<div class="app"></div>

*.selfClosing

This group of options controls whether an element should be self-closed or not if it doesn't have children.

There're several options:

• html.normal.selfClosing: This option affects on HTML normal elements.
• html.void.selfClosing: This option affects on HTML void elements.
• component.selfClosing: This option affects on Vue, Svelte, Astro and Angular components.
• svg.selfClosing: This option affects on SVG elements.
• mathml.selfClosing: This option affects on MathML elements.

All of these options can be set as null, true or false:

• null: Whether the element is self-closed or not won't be changed. Keep it as-is.
• true: Element will always be self-closed.
• false: Element will never be self-closed.

All of these options are default to null.

Example for null

Input:

<div />
<div></div>

Output:

<div />
<div></div>

Example for true

Input:

<div />
<div></div>

Output:

<div />
<div />

Example for false

Input:

<div />
<div></div>

Output:

<div></div>
<div></div>

whitespaceSensitivity

Control the whitespace sensitivity before and after the children of an element. This is similar to Prettier, so you can read its blog for detail.

Possible options:

• "css": Respect the default value of CSS display property.
• "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.

Default option is "css".

This option can be overridden for Vue, Svelte, Astro and Angular components by the following option:

• component.whitespaceSensitivity

Example for "css"

Input:

<div> text </div>
<span> text </span>

Output:

<div>text</div>
<span> text </span>

Example for "strict"

Input:

<div> text </div>
<span> text </span>

Output:

<div> text </div>
<span> text </span>

Example for "ignore"

Input:

<div> text </div>
<span> text </span>

Output:

<div>text</div>
<span>text</span>

doctypeKeywordCase

Control the case of "doctype" keyword in <!DOCTYPE>.

Possible options:

• "ignore": Keep the case as-is.
• "upper": Print "DOCTYPE" in upper case.
• "lower": Print "doctype" in lower case.

Default option is "upper".

Example for "ignore"

Input:

<!DOCTYPE html>
<!doctype html>

Output:

<!DOCTYPE html>
<!doctype html>

Example for "upper"

Input:

<!DOCTYPE html>
<!doctype html>

Output:

<!DOCTYPE html>
<!DOCTYPE html>

Example for "lower"

Input:

<!DOCTYPE html>
<!doctype html>

Output:

<!doctype html>
<!doctype html>

vBindStyle

Control Vue v-bind directive style.

Possible options:

• null: Style of v-bind directive won't be changed.
• "short": Use short-hand form like :value.
• "long": Use long-hand form like v-bind:value.

Default option is null.

Example for null

Input:

<input :value="">
<input v-bind:value="">

Output:

<input :value="">
<input v-bind:value="">

Example for "short"

Input:

<input :value="">
<input v-bind:value="">

Output:

<input :value="">
<input :value="">

Example for "long"

Input:

<input :value="">
<input v-bind:value="">

Output:

<input v-bind:value="">
<input v-bind:value="">

vOnStyle

Control Vue v-on directive style.

Possible options:

• null: Style of v-on directive won't be changed.
• "short": Use short-hand form like @click.
• "long": Use long-hand form like v-on:click.

Default option is null.

Example for null

Input:

<button @click=""></button>
<button v-on:click=""></button>

Output:

<button @click=""></button>
<button v-on:click=""></button>

Example for "short"

Input:

<button @click=""></button>
<button v-on:click=""></button>

Output:

<button @click=""></button>
<button @click=""></button>

Example for "long"

Input:

<button @click=""></button>
<button v-on:click=""></button>

Output:

<button v-on:click=""></button>
<button v-on:click=""></button>

vForDelimiterStyle

Control Vue v-for directive delimiter style.

Possible options:

• null: Style of v-for directive delimiter won't be changed.
• "in": Use in as v-for delimiter.
• "of": Use of as v-for delimiter.

Default value is null.

Example for null

Input:

<li v-for="item in list"></li>
<li v-for="item of list"></li>

Output:

<li v-for="item in list"></li>
<li v-for="item of list"></li>

Example for "in"

Input:

<li v-for="item in list"></li>
<li v-for="item of list"></li>

Output:

<li v-for="item in list"></li>
<li v-for="item in list"></li>

Example for "of"

Input:

<li v-for="item in list"></li>
<li v-for="item of list"></li>

Output:

<li v-for="item of list"></li>
<li v-for="item of list"></li>

vSlotStyle

Control Vue v-slot directive style.

Possible options:

• null: Style of v-slot directive won't be changed.
• "short": Use short-hand form like #default or #named.
• "long": Use long-hand form like v-slot:default or v-slot:named.
• "vSlot": For default slot, use v-slot (shorter than #default); otherwise, use short-hand form.

Default option is null.

This global option can be overridden by the following options:

• component.vSlotStyle: Control v-slot style at components.
• default.vSlotStyle: Control v-slot style of default slot at <template> tag.
• named.vSlotStyle: Control v-slot style of named slot at <template> tag.

Example for null

Input:

<template v-slot:default></template>
<template v-slot:header></template>
<template #default></template>
<template #header></template>

Output:

<template v-slot:default></template>
<template v-slot:header></template>
<template #default></template>
<template #header></template>

Example for "short"

Input:

<template v-slot:default></template>
<template v-slot:header></template>
<template #default></template>
<template #header></template>

Output:

<template #default></template>
<template #header></template>
<template #default></template>
<template #header></template>

Example for "long"

Input:

<template v-slot:default></template>
<template v-slot:header></template>
<template #default></template>
<template #header></template>

Output:

<template v-slot:default></template>
<template v-slot:header></template>
<template v-slot:default></template>
<template v-slot:header></template>

Example for "vSlot"

Input:

<template v-slot:default></template>
<template v-slot:header></template>
<template #default></template>
<template #header></template>

Output:

<template v-slot></template>
<template #header></template>
<template v-slot></template>
<template #header></template>

vBindSameNameShortHand

Control whether Vue attribute should be written in short-hand form or not if attribute name and value are same. If this option is unset, attribute won't be changed.

Available since v0.3.0.

Default value is null.

Example for null

Input:

<MyComponent :value />
<MyComponent :value="value" />

Output:

<MyComponent :value />
<MyComponent :value="value" />

Example for true

Input:

<MyComponent :value />
<MyComponent :value="value" />

Output:

<MyComponent :value />
<MyComponent :value />

Example for false

Input:

<MyComponent :value />
<MyComponent :value="value" />

Output:

<MyComponent :value="value" />
<MyComponent :value="value" />

vueComponentCase

Control the component naming style in template.

This option only formats component name that has two or more words.

If you're heavily using custom elements, you shouldn't use this option.

Available option values:

• "ignore": Component names will not be changed.
• "pascalCase": Component names will be converted to PascalCase.
• "kebabCase": Component names will be converted to kebab-case.

Default value is "ignore".

Example for "ignore"

Input:

<template>
  <component></component>
  <Component></Component>
  <MyComponent></MyComponent>
  <my-component></my-component>
  <My-Component></My-Component>
  <myComponent></myComponent>
</template>

Output:

<template>
  <component></component>
  <Component></Component>
  <MyComponent></MyComponent>
  <my-component></my-component>
  <My-Component></My-Component>
  <myComponent></myComponent>
</template>

Example for "pascalCase"

Input:

<template>
  <component></component>
  <Component></Component>
  <MyComponent></MyComponent>
  <my-component></my-component>
  <My-Component></My-Component>
  <myComponent></myComponent>
</template>

Output:

<template>
  <component></component>
  <Component></Component>
  <MyComponent></MyComponent>
  <MyComponent></MyComponent>
  <MyComponent></MyComponent>
  <MyComponent></MyComponent>
</template>

Example for "kebabCase"

Input:

<template>
  <component></component>
  <Component></Component>
  <MyComponent></MyComponent>
  <my-component></my-component>
  <My-Component></My-Component>
  <myComponent></myComponent>
</template>

Output:

<template>
  <component></component>
  <Component></Component>
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</template>

strictSvelteAttr

Control whether Svelte attribute value should be in strict mode or not.

Default option is false.

Example for false

<div class={class}></div>

Example for true

<div class="{class}"></div>

svelteAttrShorthand

Control whether Svelte attribute should be written in short-hand form or not when possible. If this option is unset, attribute won't be changed.

Default value is null.

Example for null

Input:

<MyComponent {value} />
<MyComponent value={value} />

Output:

<MyComponent {value} />
<MyComponent value={value} />

Example for true

Input:

<MyComponent {value} />
<MyComponent value={value} />

Output:

<MyComponent {value} />
<MyComponent {value} />

Example for false

Input:

<MyComponent {value} />
<MyComponent value={value} />

Output:

<MyComponent value={value} />
<MyComponent value={value} />

svelteDirectiveShorthand

Control whether Svelte directive should be written in short-hand form or not when possible. If this option is unset, directive won't be changed.

Default value is null.

Example for null

Input:

<MyComponent bind:value />
<MyComponent bind:value={value} />

Output:

<MyComponent bind:value />
<MyComponent bind:value={value} />

Example for true

Input:

<MyComponent bind:value />
<MyComponent bind:value={value} />

Output:

<MyComponent bind:value />
<MyComponent bind:value />

Example for false

Input:

<MyComponent bind:value />
<MyComponent bind:value={value} />

Output:

<MyComponent bind:value={value} />
<MyComponent bind:value={value} />

astroAttrShorthand

Control whether Astro attribute should be written in short-hand form or not when possible. If this option is unset, attribute won't be changed.

Default value is null.

Example for null

Input:

<MyComponent {value} />
<MyComponent value={value} />

Output:

<MyComponent {value} />
<MyComponent value={value} />

Example for true

Input:

<MyComponent {value} />
<MyComponent value={value} />

Output:

<MyComponent {value} />
<MyComponent {value} />

Example for false

Input:

<MyComponent {value} />
<MyComponent value={value} />

Output:

<MyComponent value={value} />
<MyComponent value={value} />

angularNextControlFlowSameLine

Control whether the next Angular control flow code should be on the same line with previous } or not.

Default value is true.

Example for true

Input:

@if (cond) {
    <div></div>
}
@else {
    <div></div>
}

Output:

@if (cond) {
    <div></div>
} @else {
    <div></div>
}

Example for false

Input:

@if (cond) {
    <div></div>
} @else {
    <div></div>
}

Output:

@if (cond) {
    <div></div>
}
@else {
    <div></div>
}

scriptFormatter

Tell markup_fmt what script formatter you are using.

Possible options:

• "dprint": Use this if you're using dprint-plugin-typescript.
• "biome": Use this if you're using Biome or dprint-plugin-biome.

In dprint, default option is "dprint"; otherwise, default option is null.

ignoreCommentDirective

Text directive for ignoring formatting specific element or node.

Default is "markup-fmt-ignore".

Example

<div></div>
<!-- markup-fmt-ignore -->
<div  >  </div>

ignoreFileCommentDirective

Text directive for ignoring formatting a whole file.

Default is "markup-fmt-ignore-file", but if you're using as a dprint plugin, it will be "dprint-ignore-file".

Example

<!-- markup-fmt-ignore-file -->
<div  >  </div>