How to use 'phoenix-heex' templates in VSCode

Thanks a lot, you really saved me a lot of time searching and figuring out.

Thank you as well!

Do you get HTML intellisense in VS Code with this extension? I get syntax highlighting, but no HTML intellisense or autocompletion (eg. typing “<div c” should bring attributes like “class”, right?).

Also how about intellisense for assigns, functions defined in views, helpers (link, Routes etc.)?

I was unable to get the HEEx template formatting to work immediately.

    "[phoenix-heex]": {
        "editor.defaultFormatter": "RoyalMist.vscode-eex-format"
    },

When attempting to format a HEEx file, I would get the following error.

Extension 'Elixir Templates Formatter' is configured as formatter but it cannot format 'HEEx'-files

After some searching and a bit of hacking, I can get it to work if I make add ‘phoenix-heex’ to the providers in the the royalmist.vscode-eex-format-0.2.0 extension. Oh, I also have to format a EEx file first.

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
function activate(context) {
    vscode.languages.registerDocumentFormattingEditProvider(["html", "eex", "HTML (EEx)", "html-eex", "phoenix-heex" ], {
        provideDocumentFormattingEdits(document) {
...

So, a couple of questions. First, has anybody else had this problem?

Second, why are there so many forks of this project? Is RoyalMist’s fork the one everybody uses? If I can figure this out I’ll try to submit a pull request.

If you have the problem I had, here’s the pull request I made to RoyalMist’s fork to get this to work.

https://github.com/RoyalMist/vscode-eex-format/pull/1

Also, thanks for making the original post. It really helped me get going.

Cheers!

Thanks so much! I’ve had various problems with this setup and it’s still never perfect, at least as I have it.

Second, why are there so many forks of this project? Is RoyalMist’s fork the one everybody uses?

The RoyalMist fork is the one I’ve seen mentioned the most, including by the PragmaticStudio folks. I think there must be so many forks because none are just right?

There’s a native Elixir HEEx formatter that’s been started, but I’m not sure when it will be ready.

https://github.com/Eptis/heex_formatter

Just two commits so far, but it looks like a sizeable amount of code.

@mikael asked about HTML Intellisense:

Do you get HTML intellisense in VS Code with this extension? I get syntax highlighting, but no HTML intellisense or autocompletion (eg. typing “<div c” should bring attributes like “class”, right?).

Well as I have things set up now it seems I only get Elixir Intellisense in .HEEx templates. Emmet works, and at present I’ve also got Tab9 and GitHub Copilot. Tab9 seems to give me most HTML autocomplete, and Copilot is like… umm… well it’s certainly interesting.

As for things like assigns, I find myself looking to my file myself, so no. I tend to work in separate module and template files, and I’m not yet sure how much of a difference that makes.

Yes, it’s not working for me as well. Getting the same error!

git clone https://github.com/gabecook/vscode-eex-format
cd vscode-eex-format
npm install -g vsce
npm install
vsce package
code --install-extension vscode-eex-format-0.2.0.vsix
gem install htmlbeautifier

plus the setting changes from above.

Hi all

I just merged the PR sorry for the delay.
Version 0.5.0 is ok with the new format

I cannot trigger the .heex files to work.

settings.json I have:

  "files.associations": {
    "*.heex": "phoenix-heex"
  },
  "editor.defaultFormatter": "RoyalMist.vscode-eex-format"

EDIT: Seems like triggering works with these settings but tag alignments with new tags

<.function ... /> 

does not align properly.