Emmet with languages that integrate HTML and CSS (SASS, SCSS, LESS, PHP, Twig, Vue, Svelte, Astro etc)

[saminton]

Check for existing issues

• [X] Completed

Describe the feature

The emmet extension is working fine with HTML and CSS files but unfortunately doesn't seem to be working with anything that extends from these two languages. I don't believe there is currently any way to get to "associate" the Emmet extension to other languages. SASS, SCSS and LESS for example can use the exact same emmet snippets as the current CSS implementation, Php, Twig, Vue, Svelte etc can all use the same as the HTML implementation.

I don't expect the team to have to create an implementation for each of these languages (and the many others that exist) but rather if we – the user – could have some way of associating a certain file type to one (or multiple) of the current implementations via a setting it could solve a lot of use cases.

maybe something like the following:

"languages": {
    "Twig": {
        "Emmet": {
            "HTML": true
        }
    },
    "SCSS": {
        "Emmet": {
            "CSS": true
        }
    },
    "Svelte": {
        "Emmet": {
            "HTML": true,
            "CSS": true
        }
    }
}

I have been trying out Zed and I love so many things about it but this is the feature that is preventing me from making the switch. Having to write out "border-top-left-radius: 5px" in it's entirety instead of "btl5" is kinda a deal breaker 😅

If applicable, add mockups / screenshots to help present your vision of the feature

No response

[lougreenwood]

This is really annoying.

As an extension author, I would also expect that I would be able to do something like one of the following (...my initial thought is that the first one would be ideal).

• 1. Specify that a given language is an extension of some other language, so my superset language can inherit all language-server associations that a base language supports without needing to constantly opt-in.
  • For example Handlebars (or Glimmer) is a superset of HTML, so I should be able to define that so things like Emmet, which registers itself with HTML would also automatically support Handlebars if that language is installed.
  • This would also be useful for getting Tailwind support out of the box without having to opt-in, the user just needs to install tailwind & they get it supported as a consequence of the language extending one which tailwind supports.
• 2. Override/extend which languages a given language supports in the extension.toml file... something like the following for adding Glimmer & Handlebars

  
  name = "Emmet Language Server"
  language = "HTML"
  languages = [
  "HTML",
  "PHP",
  "ERB",
  "JavaScript",
  "TSX",
  "CSS",
  "Handlebars",
  "Glimmer",
  ]```

[AlbertMarashi]

would be nice to get this supporting svelte 🙏🏼

[saminton]

Can we can any feedback from the team on this, is it something that can possibly be integrated ? Even basic SCSS support for starters. Considering it'd be exactly the same as what's already working in CSS files, the extension just needs to be active when in a .scss file.

Although I would love to make the switch to Zed. This feature is currently preventing me (and my team) from doing so.

[davidwebca]

I think (?) I've been able to make it work in Vue.js by putting more specific scopes first in the "lsp.emmet-language-server.settings.languages" (Vue.js was last before this and after changing this and restarting the language servers, it suddenly worked).

{
    "lsp": {
        "emmet-language-server": {
            "settings": {
                "languages": ["Vue.js", "HTML", "PHP", "ERB", "JavaScript", "TSX", "CSS", "Blade"]
            },
        },
    },
}

Instead of

{
    "lsp": {
        "emmet-language-server": {
            "settings": {
                "languages": ["HTML", "PHP", "ERB", "JavaScript", "TSX", "CSS", "Blade", "Vue.js"]
            },
        },
    },
}

Can someone confirm if this works for them in other languages?

[lougreenwood]

Doesn't work for me with the following in .hbs files in an Ember JS Project:

    "emmet-language-server": {
      "settings": {
        "languages": ["Handlebars", "Glimmer", "HTML", "PHP", "ERB", "JavaScript", "TSX", "CSS", "Blade"]
      }
    },

Edit:

i also don't see anything in the logs for emmet language server and I don't see any RPC messages sent for it when I edit a .hbs file.

I restarted Zed after adding this to my config.

[davidwebca]

Mmm nevermind. Indeed, it only worked for a short amount of time over here in the end 🤔

[ferrao]

Same thing for Elixir heex files and ~H sigils on ex files.

[id-clic]

Waiting for blade and twig to switch to Zed permanently :-)

[ferrao]

Same thing for Elixir heex files and ~H sigils on ex files.

Someone opened #14149 for this.