VS Code HTML Language Features for EEX and LEEX

Phoenix Forum Questions / Help
, ,
1

I am using Visual Studio Code and the great vscode-elixir-ls extension, which was recently updated. I am getting syntax highlighting in .leex and .eex files which is great.

However, none of the VS Code HTML language features are working: HTML formatting, tag matching, attribute autocompletion, etc.

I have tried including some settings that I had enabled for prior extensions:

"[html-eex]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "vscode.html-language-features"
  },
"emmet.includeLanguages": {
    "html-eex": "html"
  },

This has not succeeded. When I try to save the file VS Code reports that the HTML Language Features ‘extension’ has failed to format the file. For other extensions I have forked to add html-eex support, but I believe this is built right into VS Code. (such as https://github.com/negcx/vscode-html-css)

Has anyone solved this or found a different solution?

6 Likes
2

This will take some work that no one has put in the time yet. Here’s the VSCode documentation on an embedded language:

3 Likes
3

A complete solution isn’t here yet, but I’ve been circumventing the tag completion piece with snippets. The snippets were one of many awesome gifts that The Pragmatic Studio has provided as part of their LiveView course.

Here is a gist with the snippets—scroll down for the HTML tags in EEX (sorry for the excessive indentation I’m on mobile and can’t easily fix).

Although VS Code allows you to configure snippets by language, I think it works better to put them in a global snippets file with the scope property specifying the language. That way you only write the snippet once, but can use it in EX. EEX, LEEX, etc.

The only functional difference with the snippets is that you need to type the trigger instead of the tag, for example div then tab, rather than <div>.

I know it’s only a piece of what you’re looking for, but it makes a big difference for me.

4 Likes
4

This enables auto formatting or just auto completion?

5

Technically, just the latter. The snippets are pasted in place exactly as you write them, so newlines and such are observed, and VS Code takes care of appropriate indentation based on cursor position, but using snippets would not have any effect on the missing "editor.formatOnSave" functionality. It’s a simple workaround, rather than any attempt to replace Emmet, but since some aspects of Emmet are snippet-driven, it can replace that feel if you are willing to write a lot of snippets (or copy Emmet snippets into your own file).

6

By the way, my setting above did get Emmet snippets to work (e.g. div>div>h1). If I’m being honest, I’m looking more for the linting, attribute autocomplete, etc. These snippets are great though, thanks for those!

3 Likes