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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I followed all the settings described earlier in the post, but there is no code highlighting in <code>*.html.heex</code> templates, - everything is just black.</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/0/d/0d7bf7e1d13076bc518fbd443c59dd05de784b3d.png" data-download-href="https://forum.elixirforum.com/uploads/default/0d7bf7e1d13076bc518fbd443c59dd05de784b3d" title="Screenshot 2022-01-10 at 14.28.26" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/0/d/0d7bf7e1d13076bc518fbd443c59dd05de784b3d_2_690x121.png" alt="Screenshot 2022-01-10 at 14.28.26" data-base62-sha1="1VhO5Lm0MZtQxUxlXfjJBMbtxtH" width="690" height="121" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/0/d/0d7bf7e1d13076bc518fbd443c59dd05de784b3d_2_690x121.png, https://forum.elixirforum.com/uploads/default/optimized/3X/0/d/0d7bf7e1d13076bc518fbd443c59dd05de784b3d_2_1035x181.png 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/0/d/0d7bf7e1d13076bc518fbd443c59dd05de784b3d_2_1380x242.png 2x" data-dominant-color="343434"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Screenshot 2022-01-10 at 14.28.26</span><span class="informations">1448×254 36.9 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>Here si what I have in my VS code <code>settings.json</code> file:</p>
<pre data-code-wrap="json"><code class="lang-json">...
"emmet.includeLanguages": {
    "html-eex": "html",
    "elixir": "html",
    "Handlebars": "html",
    //"HTML (EEx)": "html",
    "postcss": "css",
    "html.erb": "html",
    "erb": "html"
  },
"files.associations": {
    "*.ex": "elixir",
    "*.exs": "elixir",
    "*.eex": "html-eex",
    "*.leex": "html-eex",
    "*.erb": "erb"
  },
  "tailwindCSS.includeLanguages": {
    "phoenix-heex": "html",
    "html-eex": "html",
    "plaintext": "html",
    "Handlebars": "html",
    "html.erb": "html",
    "erb": "html"
  },
  "beautify.language": {
    "js": {
      "type": ["javascript", "json", "jsonc"],
      "filename": [".jshintrc", ".jsbeautifyrc"]
    },
    "css": ["css", "less", "scss"],
    "html": ["htm", "html", "HTML (EEx)"]
  }
...
</code></pre>
<p>I’m using ElixirLS extension, v0.9.0, VS Code version: 1.63.2 (Universal). Any idea on what I’m missing here? Thank you.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="238772" 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/configuring-vscode-to-use-with-elixir-and-phoenix-templates/30053/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-238772" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="238772"
                     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="238774" data-post-id="238774">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I had to choose explicitely <code>html-eex</code> file association type in the right-bottom corner of the editor instead of <code>phoenix-heex</code> that was choosen by default:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/e/c/ec053c4b5b94c5decf5da36ecc81c16e78e11879.png" data-download-href="https://forum.elixirforum.com/uploads/default/ec053c4b5b94c5decf5da36ecc81c16e78e11879" title="Screenshot 2022-01-10 at 14.35.54" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/e/c/ec053c4b5b94c5decf5da36ecc81c16e78e11879.png" alt="Screenshot 2022-01-10 at 14.35.54" data-base62-sha1="xFVTNVLcBfrR2a1TcftPNOePiqt" width="470" height="104"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Screenshot 2022-01-10 at 14.35.54</span><span class="informations">470×104 14.5 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><br>
Why so? Is there a way to tell VS Code to associate phoenix templates correctly?<p></p>
<p><img src="https://forum.elixirforum.com/uploads/default/original/3X/9/e/9ef80e4aeb090a49b7849e890f2494c9df559182.png" alt="Screenshot 2022-01-10 at 14.39.29" data-base62-sha1="mGiTDYGtCdON2AEGifHOAqslkKS" width="448" height="96"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="238774" 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/configuring-vscode-to-use-with-elixir-and-phoenix-templates/30053/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-238774" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="238774"
                     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="238776" data-post-id="238776">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>My bad, it was a typo in the <code>files.associations</code> value:</p>
<pre data-code-wrap="json"><code class="lang-json">"*.eex": "html-eex",
...
</code></pre>
<p>instead of:</p>
<pre data-code-wrap="json"><code class="lang-json">"*.html.heex": "html-eex",
...
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="238776" 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/configuring-vscode-to-use-with-elixir-and-phoenix-templates/30053/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-238776" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="238776"
                     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="244645" data-post-id="244645">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As I’m learning Elixir and Phoenix, I’ve been struggling with formatting and auto-complete in Sublime Text so I thought I’d give VS Code a try and this thread is very helpful! Some updates as a new person going through things.</p>
<blockquote>
<p>Came back to a project recently and found that ElixirLS is now not a fork, so removed the fork and installed the official version. Now, .html.eex files are not recognized if I use the settings above.</p>
</blockquote>
<p>I found a similar thing. When looking at the extensions within VS Code, they explicitly said not to use ElixirLS Fork any longer. I’m assuming the Fork folk are in control of mainline now.</p>
<p>For .heex files, I searched ElixirLS Issues, where they explicitly say <a href="https://github.com/elixir-lsp/vscode-elixir-ls/issues/215#issuecomment-971152384" rel="noopener nofollow ugc">they do not support .heex files</a> and to use the <a href="https://github.com/phoenixframework/vscode-phoenix" rel="noopener nofollow ugc">phoenix extension</a>.</p>
<p>Then if you want Emmet functionality you will need to reference the “phoenix-heex” language <a href="https://forum.elixirforum.com/t/how-to-use-phoenix-heex-templates-in-vscode/42461" rel="nofollow">as written here</a>.</p>
<p>I have not figured out how to get Beautify to recognize “phoenix-heex” for HTML formatting. I assumed I could just add “phoenix-heex” or “HEEx” to the “html” list, but it hasn’t worked for me.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="244645" 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/configuring-vscode-to-use-with-elixir-and-phoenix-templates/30053/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-244645" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="244645"
                     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="244942" data-post-id="244942">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Welcome <img src="https://forum.elixirforum.com/images/emoji/apple/smile.png?v=15" title=":smile:" class="emoji" alt=":smile:" loading="lazy" width="20" height="20"></p>
<p>Did you manage to get formatting working? I ditched beautify in favour of <a href="https://github.com/feliperenan/heex_formatter" rel="noopener nofollow ugc"><code>heex_formatter</code></a>, which just got merged into the main branch of phoenix_live_view and should be available out of the box soon™. That lets you run <code>mix format</code> for both Elixir and HEEx code.</p>
<p>Here’s a possible <a href="https://forum.elixirforum.com/t/heex-formatter-a-formatter-for-heex-templates/45649/17" rel="nofollow">vscode keybinding + task</a> setup.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="244942" 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/configuring-vscode-to-use-with-elixir-and-phoenix-templates/30053/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-244942" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="244942"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>