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>·
<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> |
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> |