phoenixframework / vscode-phoenix

Syntax highlighting support for Phoenix templates in Visual Studio Code.

Phoenix package for VS Code

Syntax highlighting support for Phoenix templates.

Features

• Support syntax highlighting for .heex files
• Extends Elixir's syntax highlighting to support HEEx's syntax inside ~H

Emmet Support

To use emmet with .heex file extensions, include the options below in your settings:

"emmet.includeLanguages": {
  "phoenix-heex": "html"
}

License

Copyright (c) 2021, Marlus Saraiva.

Source code is licensed under the MIT License.

vscode-phoenix's Issues

Syntax highlighting stopped working in .heex files with VSCode 1.73.1

No problems until I updated VSCode

Version: 1.73.1
Commit: 6261075646f055b99068d3688932416f2346dd3b
Date: 2022-11-09T03:54:53.913Z
Electron: 19.0.17
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Linux x64 6.0.6-76060006-generic
Sandboxed: No

I added the emmet setting from the README

"emmet.includeLanguages": {
    "phoenix-heex": "html"
}

but still didn't work.

After some googling I found this post, added

 "files.associations": {
    "*.heex": "phoenix-heex"
}

now it works again.

Is this something that should have been automatically resolved, did I screw up something (I really don't have many custom settings or extensions), or should it be added to the README instructions?

Syntax highlight in sigil_H only works if it ends exactly in """

I'm not sure if just adding the case for """) is enough or if we need to be more "elixir-aware".

Other scenarios would be having ~H inside arrays, so we could have """, but then it can also be inside a tuple, which depending on the scenario can be formatted with """, anything here}

I think the main problem is that the elixir formatter changes

foo(
  ~H"""
    <div>something</div>
  """
)

into

foo(~H"""
  <div>something</div>
""")

Which makes so that the "correct format" doesn't highlight properly.

Is there anything I can do to help with that?

Incorrect syntax highlighting in heex `case` expression

VSCode version: 1.85.1
vscode-phoenix version: 0.1.2

The following snippet is incorrectly highlighted

  <li>
    <strong>Some:</strong>
    <%= case some do %>
      <% map when is_map(map) -> %>
        <dl>
          Map
        </dl>
      <% other -> %>
        Other
    <% end %>
  </li>

The tokens look OK, most likely it's unmatched bracket

Emmet Support Instructions

To use emmet auto-completion in this extension, add the options below in your settings:

"emmet.includeLanguages": {
"phoenix-heex": "html"
},

I'll make a Pull Request with these instructions, if that's alright with you 🙂

Code formatting support

The new Phoenix LiveView release supports a new .html.heex and ~H template engine, which deprecates .eex, .leex and ~L. It would be nice to have auto-formatting support for these.

• adamzapasnik/prettier-plugin-eex#71
• beautifier/js-beautify#1964
• elixir-lsp/vscode-elixir-ls#162
• elixir-lsp/vscode-elixir-ls#201
• elixir-lsp/vscode-elixir-ls#98
• elixir-lsp/vscode-elixir-ls#193
• phoenixframework/phoenix_live_view#1904
• #6
• prettier/prettier#12269

Support go to component definition from heex templates

Currently it's not easy to navigate from components used in heex templates into the elixir file containing the component definition.

Similarly it would really help if we could show the implemented slots directly by hovering over the component or when writing a new component.

More information here: https://elixirforum.com/t/navigating-from-heex-templates-to-core-components-ex-in-vscode/60593

Undefined language contribution

First of all, you are a hero for enabling this syntax support. 👏

Second, there seems to be a bug related to an undefined language contribution. See the screenshot. It doesn't affect the syntax highlighting from what I can tell.

Feature Request: Fold and Unfold for HTML Tags in .heex files

Feature Request

Overview:

I would like to propose the addition of a feature that allows folding and unfolding of HTML tags within .heex files. Currently, the vscode-phoenix extension provides excellent support for working with Phoenix framework's .heex files, but the ability to collapse and expand HTML tags would significantly enhance the development experience.

Details:

Feature Description:
Add the ability to fold and unfold HTML tags in .heex files.
The folding should work specifically for HTML tags, making it easier to navigate and manage the code.

Benefits:

Improved code readability and organization.
Streamlined navigation within .heex files containing extensive HTML markup.
Enhanced developer productivity.

Example of how it should be:

Screen.Recording.2024-02-23.at.09.30.52.mov

Issues with < and > in Elixir Code

Hi there 👋🏼

Recently I reopened a project with HEEx files, and found that the syntax highlighing no longer handled some cases.

Specifically, it appears that any use of the < or > characters in the embedded Elixir code causes issues with the surrounding brackets and braces. While the exact cause is unclear to me, I imagine the highlighter may think of these characters as tag open or close markers despite the change in context.

---

Versions of things:

VS Code: 1.76.1
phoenixframework extension: v0.1.2
ElixirLS extension: v0.13.0

Support multiline comments

Elixir 1.14 brings new multi line comments <%!-- --%> (https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.HTMLFormatter.html#module-inline-comments-comment). It would be great to have this supported in the vs code extension

Consider adding a language services embed for HTML as part of this extension?

First of all: thank you for providing and officially supporting such a fine VSCode extension for the Phoenix framework!

After working with this extension and HEEx templates for a while I noticed that HTML Intellisense behaviour, such as automatic indentation between tags, autocomplete of attributes, etc., was not available when working with HEEx files or inside of ~H sigils.

Out of the box, VSCode only provides the enhanced Intellisense experience for .html files. While we can configure other extensions like emmet or bradlc.vscode-tailwindcss to be enabled in HEEx via user settings, expanding the built-in HTML Intellisense to HEEx appears to be bit more involved.

Microsoft provides a detailed write-up on how this functionality can be accomplished via language extensions at [1] with source code examples at [2], [3]. For instance, the vscode-html-erb extension uses such a language services embed to offer HTML-Intellisense in Ruby (.erb) templates.

Given the similarity of HEEx and ERB syntax, aki77's code with some minor modifications implemented in a quick and dirty prototype showcases that a similar approach could perhaps be viable for HEEx.

Interestingly a language services embed seems to add TMScope to HTML tags in HEEx files, possibly providing an answer to #18.

Please consider publishing this in the Open VSX Registry

To allow the use of this extension in open source VS Code alternatives, please consider registering this on https://open-vsx.org/

There are instructions on how to do that here: https://github.com/eclipse/openvsx/wiki/Publishing-Extensions

Thanks!

Code formatting support

Do you plan to support it?

HTML tags have textmate scope meta.tag.other.unrecognized.html.derivative

With the extension enabled, html tags (all of themexcept for script as far as I could find) all have the textmate scope meta.tag.other.unrecognized.html.derivative instead of (for a body tag for example) meta.tag.structure.body.start.html / meta.tag.structure.body.end.html.

I discovered this when I tried to edit a theme to mute the closing tags for a more slim / pug type editing experience.

Allow extension to be installed in container or remote

If you try to install the extension in vscode when running with a devcontainer, you only see the option Install Locally. It would be nice if the extension could be installed directly in the devcontainer so you have the right extensions installed when you open your devcontainer on a different machine.

I was able to enable the extension in my devcontainer by overriding the extensionKind in my settings.json like this:

"remote.extensionKind": {
    "phoenixframework.phoenix": [
        "workspace"
    ]
}

For more info see the vscode extension host docs.

Tag does not close properly

Hello !
I've encountered an issue closing a tag in vscode when the extension is enabled on .html.heex files

here is the code used:

<div class="items">
  <ol>
    <li>
      <span>Question A</span>
      <ol>
        <li>Response A</li>
        <li>Response B</li>
        <li>Response C</li>
      </ol>
    </li>
    <li>
      <span>Question B</span>
      <ol>
        <li>Response A</li>
        <li>Response B</li>
        <li>Response C</li>
      </ol>
    </li>
    <li>
      <span>Question C</span>
      <ol>
        <li>
          <span class="sub-item">Subquestion A</span>
          <ol>
            <li>Subresponse A</li>
            <li>Subresponse B</li>
            <li>Subresponse C</li>
          </ol>
        </li>
        <li>
          <span class="sub-item">Subquestion B</span>
          <ol>
            <li>Subresponse A</li>
            <li>Subresponse B</li>
            <li>Subresponse C</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>