ReSharper
 
2022.3
Shortcuts: Visual Studio
Get ReSharper
You are viewing the documentation for an earlier version of 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: 28 December 2022

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>