ReSharper
 
2024.3
Shortcuts: Visual Studio
Get ReSharper
  1. Code style and cleanup
  2. Use EditorConfig
  3. EditorConfig properties by language and category
  4. EditorConfig properties for HTML: Formatting Style

EditorConfig properties for HTML: Formatting Style

Last modified: 26 May 2024

tip

Formatting preferences listed on this page can be also configured visually, on the Code Editing | HTML | Formatting Style | Formatting Style page of ReSharper options Alt+R, O.

Tabs and indents

Indent style

Property names:

indent_style, [resharper_]html_indent_style

Possible values:

  • tab: Tab

  • space: Spaces

Examples:

tab

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

space

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

Indent size

Property names:

indent_size, [resharper_]html_indent_size

Possible values:

an integer

Examples:

value: 0

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

value: 1

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

value: 2

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

Tab width

Property names:

tab_width, [resharper_]html_tab_width

Possible values:

an integer

Examples:

value: 0

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

value: 1

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

value: 2

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

How to align when tabs are used for indents

Property names:

[resharper_]html_alignment_tab_fill_style, [resharper_]alignment_tab_fill_style

Possible values:

  • use_spaces: Use spaces (looks aligned on any tab size)

  • use_tabs_only: Only use tabs (inaccurate)

  • optimal_fill: Mix tabs and spaces for optimal fill

Align even if the resulting indentation is too large

Property names:

[resharper_]html_allow_far_alignment, [resharper_]allow_far_alignment

Allow alignment even if construct is located too far to the right, more than 2/3 of `Hard wrap at` limit

Possible values:

true | false

Processing instructions

Spaces around '=' in attribute

Property names:

[resharper_]html_spaces_around_eq_in_pi_attribute, [resharper_]spaces_around_eq_in_pi_attribute

Possible values:

true | false

Examples:

true

<?xml version = '1.0' encoding = 'utf-8'?>

false

<?xml version='1.0' encoding='utf-8'?>

Space after last attribute

Property names:

[resharper_]html_space_after_last_pi_attribute, [resharper_]space_after_last_pi_attribute

Possible values:

true | false

Examples:

true

<?xml version='1.0' encoding='utf-8' ?>

false

<?xml version='1.0' encoding='utf-8'?>

Attributes format

Property names:

[resharper_]html_pi_attribute_style, [resharper_]pi_attribute_style

Possible values:

  • on_single_line: On single line

  • first_attribute_on_single_line: First attribute on single line

  • on_different_lines: Each attribute on separate lines

  • do_not_touch: Do not touch

Examples:

on_single_line

<?xml version='1.0' encoding='utf-8'?>

first_attribute_on_single_line

<?xml version='1.0'
      encoding='utf-8'?>

on_different_lines

<?xml
    version='1.0'
    encoding='utf-8'?>

do_not_touch

<?xml version='1.0' encoding='utf-8'?>

Attributes indenting

Property names:

[resharper_]html_pi_attributes_indent, [resharper_]pi_attributes_indent

Possible values:

  • single_indent: Single indent

  • double_indent: Double indent

  • align_by_first_attribute: Align by first attribute

Examples:

single_indent

<?xml version='1.0' encoding='utf-8'?>

double_indent

<?xml version='1.0' encoding='utf-8'?>

align_by_first_attribute

<?xml version='1.0' encoding='utf-8'?>

Blank line after processing instructions

Property names:

[resharper_]html_blank_line_after_pi, [resharper_]blank_line_after_pi

Possible values:

true | false

Examples:

true

<?xml version='1.0' encoding='utf-8'?>

<a/>

false

<?xml version='1.0' encoding='utf-8'?>
<a/>

Inside of tag header

Spaces around '=' in attribute

Property names:

[resharper_]html_spaces_around_eq_in_attribute, [resharper_]spaces_around_eq_in_attribute

Possible values:

true | false

Examples:

true

<a x = '1' y = '2' z = '3'/>

false

<a x='1' y='2' z='3'/>

Space after last attribute

Property names:

[resharper_]html_space_after_last_attribute, [resharper_]space_after_last_attribute

Possible values:

true | false

Examples:

true

<a x='1' y='2' z='3' >text</a>

false

<a x='1' y='2' z='3'>text</a>

Space before '/>'

Property names:

[resharper_]html_space_before_self_closing, [resharper_]space_before_self_closing

Possible values:

true | false

Examples:

true

<a />

false

<a/>

Attributes format

Property names:

[resharper_]html_attribute_style, [resharper_]attribute_style

Possible values:

  • on_single_line: On single line

  • first_attribute_on_single_line: First attribute on single line

  • on_different_lines: Each attribute on separate lines

  • do_not_touch: Do not touch

Examples:

on_single_line

<a x='1' y='2' z='3'/>

first_attribute_on_single_line

<a x='1'
   y='2'
   z='3'/>

on_different_lines

<a
    x='1'
    y='2'
    z='3'/>

do_not_touch

<a x='1' y='2' z='3'/>

Attributes indenting

Property names:

[resharper_]html_attribute_indent, [resharper_]attribute_indent

Possible values:

  • single_indent: Single indent

  • double_indent: Double indent

  • align_by_first_attribute: Align by first attribute

Examples:

single_indent

<div class='a'
    style='color:red'
    data-attr='3'/>

double_indent

<div class='a'
        style='color:red'
        data-attr='3'/>

align_by_first_attribute

<div class='a'
     style='color:red'
     data-attr='3'/>

Sort attributes

Property names:

[resharper_]html_sort_attributes, [resharper_]sort_attributes

Possible values:

true | false

Examples:

true

<div class='a'
     data-attr='3'
     style='color:red'/>

false

<div data-attr='3'
     style='color:red'
     class='a'/>

Sort class selectors

Property names:

[resharper_]html_sort_class_selectors, [resharper_]sort_class_selectors

Possible values:

true | false

Examples:

true

<div class="a b c"/>

false

<div class="b c a"/>

Around tags

Maximum blank lines between tags

Property names:

[resharper_]html_max_blank_lines_between_tags, [resharper_]max_blank_lines_between_tags

Possible values:

an integer

Examples:

value: 0

<br/>
<br/>

value: 1

<br/>

<br/>

value: 2

<br/>


<br/>

Place all elements on a new line

Property names:

[resharper_]html_linebreak_before_all_elements, [resharper_]linebreak_before_all_elements

Possible values:

true | false

Examples:

true

Hi!
<br/>
<i>some text</i>
<b>some text</b>

false

Hi! <br/><i>some text</i><b>some text</b>

Place multiline elements on a new line

Property names:

[resharper_]html_linebreak_before_multiline_elements, [resharper_]linebreak_before_multiline_elements

Possible values:

true | false

Examples:

true

Hi! <br/><i>some text</i>
<b>
    more text
</b>
<img
    data-attr='3'
    class='a'/>

false

Hi! <br/><i>some text</i><b>
    more text
</b><img
        data-attr='3'
        class='a'/>

Place the following elements on a new line

Property names:

[resharper_]html_linebreak_before_elements, [resharper_]linebreak_before_elements

Do not indent children of

Property names:

[resharper_]html_no_indent_inside_elements, [resharper_]no_indent_inside_elements

Do not indent children if element has more lines than

Property names:

[resharper_]html_no_indent_inside_if_element_longer_than, [resharper_]no_indent_inside_if_element_longer_than

Possible values:

an integer

Keep white spaces inside

Property names:

[resharper_]html_preserve_spaces_inside_tags, [resharper_]preserve_spaces_inside_tags

Line breaks after start-tag and before end-tag in multiline elements

Property names:

[resharper_]html_linebreaks_inside_tags_for_multiline_elements, [resharper_]linebreaks_inside_tags_for_multiline_elements

Possible values:

true | false

Examples:

true

<tag>
    text text text
    Text text text text text text text text text
</tag>

false

<tag>text text text
    Text text text text text text text text text</tag>

Line breaks after start-tag and before end-tag in elements that contain other elements and no text

Property names:

[resharper_]html_linebreaks_inside_tags_for_elements_with_child_elements, [resharper_]linebreaks_inside_tags_for_elements_with_child_elements

Possible values:

true | false

Examples:

true

<tag>
    <othertag>text</othertag>
</tag>

false

<tag><othertag>text</othertag></tag>

Other

Line feed at end of file

Property names:

insert_final_newline, [resharper_]html_insert_final_newline

Possible values:

true | false

Extra spaces inside

Property names:

[resharper_]html_extra_spaces, [resharper_]extra_spaces

Possible values:

  • remove_all: Remove all extra spaces

  • leave_tabs: Leave extra tabs

  • leave_multiple: Leave multiple extra spaces

  • leave_all: Leave all extra spaces and tabs

Examples:

Before formatting

After formatting, remove_all

<p   id    = "II"    > I   </p>
<em  dir   = "rtl"   > He  </em>
<div class = "first" > You </div>
<p	id	=	"II"	>	I	</p>
<em	dir	=	"rtl"	>	He	</em>
<div	class	=	"first"	>	You	</div>
<p id="II"> I </p>
<em dir="rtl"> He </em>
<div class="first"> You </div>
<p id="II"> I </p>
<em dir="rtl"> He </em>
<div class="first"> You </div>

Before formatting

After formatting, leave_tabs

<p   id    = "II"    > I   </p>
<em  dir   = "rtl"   > He  </em>
<div class = "first" > You </div>
<p	id	=	"II"	>	I	</p>
<em	dir	=	"rtl"	>	He	</em>
<div	class	=	"first"	>	You	</div>
<p id="II"> I </p>
<em dir="rtl"> He </em>
<div class="first"> You </div>
<p	id	=	"II"	>	I	</p>
<em	dir	=	"rtl"	>	He	</em>
<div	class	=	"first"	>	You	</div>

Before formatting

After formatting, leave_multiple

<p   id    = "II"    > I   </p>
<em  dir   = "rtl"   > He  </em>
<div class = "first" > You </div>
<p	id	=	"II"	>	I	</p>
<em	dir	=	"rtl"	>	He	</em>
<div	class	=	"first"	>	You	</div>
<p   id    ="II"    > I   </p>
<em  dir   ="rtl"   > He  </em>
<div class="first"> You </div>
<p id="II"> I </p>
<em dir="rtl"> He </em>
<div class="first"> You </div>

Before formatting

After formatting, leave_all

<p   id    = "II"    > I   </p>
<em  dir   = "rtl"   > He  </em>
<div class = "first" > You </div>
<p	id	=	"II"	>	I	</p>
<em	dir	=	"rtl"	>	He	</em>
<div	class	=	"first"	>	You	</div>
<p   id    = "II"    > I   </p>
<em  dir   = "rtl"   > He  </em>
<div class = "first" > You </div>
<p	id	=	"II"	>	I	</p>
<em	dir	=	"rtl"	>	He	</em>
<div	class	=	"first"	>	You	</div>