ReSharper 2017.3 Help

HTML - Formatting Style

Tabs and Indents

Indent style

Property names:

html_indent_style, indent_style

Possible values:

  • space: Spaces
  • tab: Tab

Examples:

space
<div> ····<div> ········text ····</div> </div>
tab
<div><div> →→text →</div> </div>

Indent size

Property names:

html_indent_size, 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:

html_tab_width, 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:

  • optimal_fill: Mix tabs and spaces for optimal fill
  • use_tabs_only: Only use tabs (inaccurate)
  • use_spaces: Use spaces (looks aligned on any tab size)

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_different_lines: Each attribute on separate lines
  • do_not_touch: Do not touch
  • on_single_line: On single line
  • first_attribute_on_single_line: First attribute on single line

Examples:

on_different_lines
<?xml ··version='1.0' ··encoding='utf-8'?>
do_not_touch
<?xml·version='1.0'·encoding='utf-8'?>
on_single_line
<?xml·version='1.0'·encoding='utf-8'?>
first_attribute_on_single_line
<?xml·version='1.0' ······encoding='utf-8'?>

Attributes indenting

Property names:

[resharper_]html_pi_attributes_indent, [resharper_]pi_attributes_indent

Possible values:

  • align_by_first_attribute: Align by first attribute
  • double_indent: Double indent
  • single_indent: Single indent

Examples:

align_by_first_attribute
<?xml·version='1.0'·encoding='utf-8'?>
double_indent
<?xml·version='1.0'·encoding='utf-8'?>
single_indent
<?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_different_lines: Each attribute on separate lines
  • do_not_touch: Do not touch
  • on_single_line: On single line
  • first_attribute_on_single_line: First attribute on single line

Examples:

on_different_lines
<a ··x='1' ··y='2' ··z='3'/>
do_not_touch
<a·x='1'·y='2'·z='3'/>
on_single_line
<a·x='1'·y='2'·z='3'/>
first_attribute_on_single_line
<a·x='1' ···y='2' ···z='3'/>

Attributes indenting

Property names:

[resharper_]html_attribute_indent, [resharper_]attribute_indent

Possible values:

  • align_by_first_attribute: Align by first attribute
  • double_indent: Double indent
  • single_indent: Single indent

Examples:

align_by_first_attribute
<div·class='a' ·····style='color:red' ·····data-attr='3'/>
double_indent
<div·class='a' ····style='color:red' ····data-attr='3'/>
single_indent
<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 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 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 these elements on 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

Examples:

value: 0
value: 1
value: 2

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:

html_insert_final_newline, insert_final_newline

Possible values:

true | false

Extra spaces inside

Property names:

[resharper_]html_extra_spaces, [resharper_]extra_spaces

Possible values:

  • leave_multiple: Leave multiple extra spaces
  • leave_all: Leave all extra spaces and tabs
  • remove_all: Remove all extra spaces
  • leave_tabs: Leave extra tabs

Examples:

Before formatting After formatting, leave_multiple
<p···id····=·"II"····>·I···</p>··· <em··dir···=·"rtl"···>·He··</em>·· <div·class·=·"first"·>·You·</div>· <pid→="II">→I→</p><emdir→="rtl">→He→</em><divclass→="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>· <pid→="II">→I→</p><emdir→="rtl">→He→</em><divclass→="first">→You→</div>
<p···id····=·"II"····>·I···</p> <em··dir···=·"rtl"···>·He··</em> <div·class·=·"first"·>·You·</div> <pid→="II">→I→</p> <emdir→="rtl">→He→</em> <divclass→="first">→You→</div>
Before formatting After formatting, remove_all
<p···id····=·"II"····>·I···</p>··· <em··dir···=·"rtl"···>·He··</em>·· <div·class·=·"first"·>·You·</div>· <pid→="II">→I→</p><emdir→="rtl">→He→</em><divclass→="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>· <pid→="II">→I→</p><emdir→="rtl">→He→</em><divclass→="first">→You→</div>
<p·id="II">·I·</p> <em·dir="rtl">·He·</em> <div·class="first">·You·</div> <pid→="II">→I→</p> <emdir→="rtl">→He→</em> <divclass→="first">→You→</div>
Last modified: 17 January 2018