vscode-phoenix
vscode-phoenix copied to clipboard
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.
https://github.com/microsoft/vscode/pull/146731 added a feature for extensions to enable the builtin html-language
extension on their languageId
"extensionDependencies": [
"vscode.html-language-features"
],
"contributes": {
"htmlLanguageParticipants": [
{
"languageId": "phoenix-heex",
"autoInsert": true
}
]
}
related: https://github.com/microsoft/vscode/pull/198583