<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="113856" data-post-id="113856">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="nour" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  nour
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="OvermindDL1" data-post="5" data-topic="19265">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/overminddl1/48/2677_2.png" class="avatar"> OvermindDL1:</div>
<blockquote>
<p>I’m curious why VSCode has such issues formatting eex files? In <a href="http://Atom.io" rel="noopener nofollow ugc">Atom.io</a> a <code>*.html.eex</code> file uses the normal HTML formatter for the file and the Elixir formatter for inside <code>&lt;%...%&gt;</code> parts, it can arbitrarily nest formatters based on various markers (For <code>*.html.eex</code> files the start marker is <code>&lt;%</code> and the end marker is <code>%&gt;</code> ,</p>
</blockquote>
</aside>
<p>It all depends on the plugin.<br>
As youknow,all these plugins are developped by simple independant developpers so it’s normal to find bugs.<br>
No plugin is proviedby Microsoft.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="113856" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-113856" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="113856"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="113919" data-post-id="113919">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="OvermindDL1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/OvermindDL1/120/2677_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  OvermindDL1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="nour" data-post="12" data-topic="19265">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/n/df788c/48.png" class="avatar"> nour:</div>
<blockquote>
<p>It all depends on the plugin.<br>
As youknow,all these plugins are developped by simple independant developpers so it’s normal to find bugs.<br>
No plugin is proviedby Microsoft.</p>
</blockquote>
</aside>
<p>That is if they are to handle sub-context support manually, but that is something that should be handled by the editor backend itself though.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="113919" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-113919" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="113919"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="114115" data-post-id="114115">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jayjun" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jayjun/120/7100_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jayjun
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Atom ships with Tree-sitter now, which understands your code semantically rather than pretend to with regex (TextMate grammar). Syntax highlighting and auto-formatting embedded languages would theoretically be far superior.</p>
<div class="youtube-onebox lazy-video-container" data-video-id="a1rC79DHpmY" data-video-title="Tree-sitter: a new parsing system for programming tools - GitHub Universe 2017" data-video-start-time="" data-provider-name="youtube">
  <a href="https://www.youtube.com/watch?v=a1rC79DHpmY" target="_blank" class="video-thumbnail" rel="noopener nofollow ugc">
    <img class="youtube-thumbnail" src="https://img.youtube.com/vi/a1rC79DHpmY/maxresdefault.jpg" title="Tree-sitter: a new parsing system for programming tools - GitHub Universe 2017" width="690" height="388">
  </a>
</div>

<p>There are no Tree-sitter parsers implemented for Elixir or EEx yet. But since VS Code <a href="https://github.com/Microsoft/vscode/issues/50140" rel="noopener nofollow ugc">hasn’t indicated support</a>, developer experience on Atom may pull ahead once a parser is made.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="114115" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-114115" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="114115"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="114131" data-post-id="114131">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fklement" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fklement/120/24995_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fklement
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That’s not really directly related to auto formatting, but I think here is a good place to publish this.<br>
When you use vscode-elixir it really drove me crazy how commenting on interpolated elixir tags inside an .html.eex file broke through the complete syntax code.<br>
So I just opened a PR to vscode-elixir that solves that problem by simple using the normal html multiline comment tags.<br>
<a href="https://github.com/fr1zle/vscode-elixir/pull/146" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/fr1zle/vscode-elixir/pull/146</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="114131" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-114131" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="114131"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="133529" data-post-id="133529">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="arijoon" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/arijoon/120/15875_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  arijoon
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>VS Code does support embedded languages: <a href="https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#embedded-languages" class="inline-onebox" rel="noopener nofollow ugc">Syntax Highlight Guide | Visual Studio Code Extension API</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="133529" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-133529" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="133529"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="133535" data-post-id="133535">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="OvermindDL1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/OvermindDL1/120/2677_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  OvermindDL1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="arijoon" data-post="16" data-topic="19265">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/arijoon/48/15875_2.png" class="avatar"> arijoon:</div>
<blockquote>
<p>VS Code does support embedded languages: <a href="https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#embedded-languages" rel="noopener nofollow ugc">https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#embedded-languages </a></p>
</blockquote>
</aside>
<p>Ooo nice!  It’s about time it does!  I hope extensions take advantage of it without users needing to do manual configuration like that!  <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="133535" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-133535" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="133535"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="133542" data-post-id="133542">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="arijoon" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/arijoon/120/15875_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  arijoon
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’ve been trying to modify the vscode-elixir-ls to use it all night, but no luck so far, if anyone knows of other extensions that take advantage of that feature let us know it’ll be helpful to see some examples. (I tried to mimic what Ruby extension does but didn’t work out very well)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="133542" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-133542" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="133542"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="140788" data-post-id="140788">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="edwildgoose" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  edwildgoose
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>ping…</p>
<p>Yes, this is also driving me mad about the EEX formatting in VSCode.</p>
<p>I also found the embedded language support instructions and tried to figure out what was needed to support vscode-elixir-ls, but couldn’t figure it out…</p>
<p>Did you raise a bug on this with vscode-elixir-ls? Perhaps someone there has more idea?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="140788" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-140788" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="140788"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="140846" data-post-id="140846">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tme_317" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tme_317
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>For VSCode, I use the Prettier plugin for most filetypes but as stated earlier in this thread that breaks .html.eex files.</p>
<p>What I found works great is to install the <code>Beautify</code> plugin and configure it to only affect EEx:</p>
<pre data-code-wrap="json"><code class="lang-json">  "beautify.language": {
    "js": [],
    "css": [],
    "html": [
      "HTML (EEx)"
    ]
  }
</code></pre>
<p>If you are using ST3 you’ll want to use the HTML-CSS-JS Prettify plugin.</p>
<p>I still haven’t figured out how to get syntax highlighting or auto-formatting to apply to inline LiveView as the ~L sigil is treated as a normal heredoc string.</p>
<p>Hope this helps someone!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="140846" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-140846" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="140846"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #19"></div>
  </section>
</div>
    <div class="postbit" id="141167" data-post-id="141167">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="arijoon" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/arijoon/120/15875_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  arijoon
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I have created this pull request:<br>
<a href="https://github.com/JakeBecker/vscode-elixir-ls/pull/136" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/JakeBecker/vscode-elixir-ls/pull/136</a></p>
<p>But it does not work just as you expect, the beautify solution should be the best option available at the moment</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="141167" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-141167" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="141167"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/19265/load_more?page=3">Load more posts (4 remaining)</a>
</div></template></turbo-stream>