negcx
VS Code HTML Language Features for EEX and LEEX
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 GitHub - negcx/vscode-html-css: Visual Studio Code Extension - CSS support for HTML documents · GitHub)
Has anyone solved this or found a different solution?
Most Liked
Dusty
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.
axelson
This will take some work that no one has put in the time yet. Here’s the VSCode documentation on an embedded language:
https://code.visualstudio.com/api/language-extensions/embedded-languages
negcx
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!
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #code-sync
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"