<p dir="auto">Is there any way to prevent Visual Studio form auto-formatting html onto one line?</p>
<p dir="auto">For example</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div ng-repeat=&quot;item in items&quot;
     ng-class=&quot;item.classes&quot;
     ng-init=&quot;i = $index&quot;&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div ng-repeat="item in items"
     ng-class="item.classes"
     ng-init="i = $index"&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">Gets auto-formatted to:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div ng-repeat=&quot;item in items&quot; ng-class=&quot;item.classes&quot; ng-init=&quot;i = $index&quot;&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div ng-repeat="item in items" ng-class="item.classes" ng-init="i = $index"&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">This seems unreasonably opinionated, especially since many frameworks these days take advantage of element attributes. It's not nice to have 5+ attributes on one line and is the reason I've avoided auto-formatting my html, as much as I would REALLY like to be able to.</p>
<p dir="auto">HTML Formatting ideally should have a feature to separate attributes on new lines when using <code class="notranslate">format code</code>.</p>
<p dir="auto">e.g.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;my-hero-list [heroes]=&quot;heroes&quot; (selectHero)=&quot;onSelect($event)&quot; class=&quot;nav&quot;&gt;&lt;/my-hero-list&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">my-hero-list</span> <span class="pl-c1">[heroes]</span>="<span class="pl-s">heroes</span>" <span class="pl-c1">(selectHero)</span>="<span class="pl-s">onSelect($event)</span>" <span class="pl-c1">class</span>="<span class="pl-s">nav</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">my-hero-list</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">When using format code should be formatted as:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;my-hero-list [heroes]=&quot;heroes&quot; 
    (selectHero)=&quot;onSelect($event)&quot;
    class=&quot;nav&quot;&gt;
&lt;/my-hero-list&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">my-hero-list</span> <span class="pl-c1">[heroes]</span>="<span class="pl-s">heroes</span>" 
    <span class="pl-c1">(selectHero)</span>="<span class="pl-s">onSelect($event)</span>"
    <span class="pl-c1">class</span>="<span class="pl-s">nav</span>"<span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">my-hero-list</span><span class="pl-kos">&gt;</span></pre></div>