Issues with < and > in Elixir Code

[aj-foster]

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

[aj-foster]

Upon further review, it appears this issue is not related to the grammar, and instead is related to VS Code's built-in bracket pair colorization. This issue has a related story for embedded TypeScript. However, the proposed solution may also require changes to the grammar.

In the meantime, users may selectively disable bracket pair colorization for HEEx using the following addition to their settings.json:

  "[phoenix-heex]": {
    "editor.bracketPairColorization.enabled": false
  },

Note that this will work for separate .heex files. There may also be a way to target this configuration for the ~H sigil.

[RedCMD]

you can disable symbols being used as brackets with "unbalancedBracketScopes"
for example:

"unbalancedBracketScopes": [
	"invalid.illegal.characters-not-allowed-here.html",
	"entity.other.attribute-name.html"
]