phoenixframework / vscode-phoenix

Syntax highlighting support for Phoenix templates in Visual Studio Code.
https://marketplace.visualstudio.com/items?itemName=phoenixframework.phoenix
MIT License
160 stars 10 forks source link

Consider adding a language services embed for HTML as part of this extension? #20

Open nicbet opened 10 months ago

nicbet commented 10 months ago

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.

RedCMD commented 9 months ago

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