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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Congratulations <a class="mention" href="/u/feliperenan" rel="nofollow">@feliperenan</a> !!! That is a big achievement.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="244553" data-batch-url="/posts/batch_likers">
                        3
                      </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/heex-formatter-a-formatter-for-heex-templates/45649/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-244553" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="244553"
                     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 #23"></div>
  </section>
</div>
    <div class="postbit" id="244558" data-post-id="244558">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="feliperenan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/feliperenan/120/15585_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  feliperenan
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Here is how you setup it.</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/phoenixframework/phoenix_live_view/blob/main/lib/phoenix_live_view/html_formatter.ex#L7">
  <header class="source">

      <a href="https://github.com/phoenixframework/phoenix_live_view/blob/main/lib/phoenix_live_view/html_formatter.ex#L7" target="_blank" rel="noopener nofollow ugc">github.com/phoenixframework/phoenix_live_view</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/phoenixframework/phoenix_live_view/blob/main/lib/phoenix_live_view/html_formatter.ex#L7" target="_blank" rel="noopener nofollow ugc">lib/phoenix_live_view/html_formatter.ex</a></h4>

<div class="git-blob-info">
  <a href="https://github.com/phoenixframework/phoenix_live_view/blob/main/lib/phoenix_live_view/html_formatter.ex#L7" rel="noopener nofollow ugc"><code>main</code></a>
</div>



    <pre class="onebox"><code class="lang-ex">
      <ol class="start lines" start="1" style="counter-reset: li-counter 0 ;">
          <li>defmodule Phoenix.LiveView.HTMLFormatter do</li>
          <li>  @moduledoc """</li>
          <li>  Format HEEx templates from `.heex` files or `~H` sigils.</li>
          <li></li>
          <li>  This is a `mix format` [plugin](https://mix.hexdocs.pm/main/Mix.Tasks.Format.html#module-plugins).</li>
          <li></li>
          <li class="selected">  ## Setup</li>
          <li></li>
          <li>  Add it as a plugin to your `.formatter.exs` file and make sure to put</li>
          <li>  the `heex` extension in the `inputs` option.</li>
          <li></li>
          <li>  ```elixir</li>
          <li>  [</li>
          <li>    plugins: [Phoenix.LiveView.HTMLFormatter],</li>
          <li>    inputs: ["*.{heex,ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{heex,ex,exs}"],</li>
          <li>    # ...</li>
          <li>  ]</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>You need to either LV master or wait for a new release 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="244558" data-batch-url="/posts/batch_likers">
                        5
                      </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/heex-formatter-a-formatter-for-heex-templates/45649/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-244558" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="244558"
                     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 #24"></div>
  </section>
</div>
    <div class="postbit" id="244749" data-post-id="244749">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Found this thread on <a href="http://forum.elixirforum.com" rel="nofollow">forum.elixirforum.com</a> after about an hour of googling.</p>
<p>Hope this helps people: <a href="https://github.com/phoenixframework/phoenix_live_view/issues/1910" class="inline-onebox" rel="noopener nofollow ugc">Skipping formatter plugin Phoenix.LiveView.HTMLFormatter because module cannot be found · Issue #1910 · phoenixframework/phoenix_live_view · GitHub</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="244749" 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/heex-formatter-a-formatter-for-heex-templates/45649/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-244749" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="244749"
                     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 #25"></div>
  </section>
</div>
    <div class="postbit" id="248392" data-post-id="248392">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Can this be set up in VS Code to have automatic formatting after saving a file?</p>
<p>The ElixirLS extension does this for .ex files but I can’t seem to get it working for HEEx.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="248392" 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/heex-formatter-a-formatter-for-heex-templates/45649/27">Post #26</a>
	                </div>
	            </div>
              <div id="likers-container-248392" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="248392"
                     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 #26"></div>
  </section>
</div>
    <div class="postbit" id="248394" data-post-id="248394">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="josevalim" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/120/1787_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  josevalim
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Elixir</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Changes to visual studio code may be required, because they don’t call the mix format command directly but rather one of its functions. All the relevant information should be returned by our APIs.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="248394" 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/heex-formatter-a-formatter-for-heex-templates/45649/28">Post #27</a>
	                </div>
	            </div>
              <div id="likers-container-248394" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="248394"
                     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 #27"></div>
  </section>
</div>
    <div class="postbit" id="248395" data-post-id="248395">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I use the runonsave extension like described here: <a href="https://forum.elixirforum.com/t/heex-formatter-a-formatter-for-heex-templates/45649/18" class="inline-onebox" rel="nofollow">Heex formatter - a Formatter for Heex templates - #18 by cvkmohan</a></p>
<p>The downside is that then “save without formatting” isn’t possible.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="248395" 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/heex-formatter-a-formatter-for-heex-templates/45649/29">Post #28</a>
	                </div>
	            </div>
              <div id="likers-container-248395" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="248395"
                     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 #28"></div>
  </section>
</div>
    <div class="postbit" id="248414" data-post-id="248414">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I just tried the formatter. Do we really need to format <code>&lt;br&gt;</code> → <code>&lt;br /&gt;</code>.</p>
<p>PS: Other than that it’s great. And the thing thing the <code>&lt;br&gt;</code> is also nitpicking.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="248414" 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/heex-formatter-a-formatter-for-heex-templates/45649/30">Post #29</a>
	                </div>
	            </div>
              <div id="likers-container-248414" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="248414"
                     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 #29"></div>
  </section>
</div>
    <div class="postbit" id="248415" data-post-id="248415">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Ok. One more thing.<br>
The formatter should not remove comments <code>&lt;%# TODO: xxx %&gt;</code>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="248415" data-batch-url="/posts/batch_likers">
                        3
                      </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/heex-formatter-a-formatter-for-heex-templates/45649/31">Post #30</a>
	                </div>
	            </div>
              <div id="likers-container-248415" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="248415"
                     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 #30"></div>
  </section>
</div>
    <div class="postbit" id="248418" data-post-id="248418">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks, I also saw that there’s an open issue in the ElixirLS extension: <a href="https://github.com/elixir-lsp/vscode-elixir-ls/issues/242" class="inline-onebox" rel="noopener nofollow ugc">Formatting on save does not work with heex files. · Issue #242 · elixir-lsp/vscode-elixir-ls · GitHub</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="248418" 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/heex-formatter-a-formatter-for-heex-templates/45649/32">Post #31</a>
	                </div>
	            </div>
              <div id="likers-container-248418" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="248418"
                     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 #31"></div>
  </section>
</div>
    <div class="postbit" id="248419" data-post-id="248419">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks, will try that extension.</p>
<p>Buy now I’ve added a pre-commit git hook so I don’t forget to run <code>mix format</code>, like this <a href="https://github.com/paulanthonywilson/elixir-mix-format-pre-commit-hook/blob/master/pre-commit" class="inline-onebox" rel="noopener nofollow ugc">elixir-mix-format-pre-commit-hook/pre-commit at master · paulanthonywilson/elixir-mix-format-pre-commit-hook · GitHub</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="248419" 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/heex-formatter-a-formatter-for-heex-templates/45649/33">Post #32</a>
	                </div>
	            </div>
              <div id="likers-container-248419" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="248419"
                     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 #32"></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/45649/load_more?page=4">Load more posts (4 remaining)</a>
</div></template></turbo-stream>