Enable Emmet for a Language in VSCode

2021-07-23

In this post we are going to check out how you can enable emmet (opens new window) for a given language in your vscode.

It is really simple. First, open up VSCode. Bring up the command palette with Ctrl+Shift+P and search for open settings json.

open settings json

Then extend the section "emmet.includeLanguages": {} or create it.

Let's say you are playing around with elixir (opens new window) and you want to use the EEx (opens new window) template engine, then you would add the following.

"emmet.includeLanguages": {
    "html-eex": "html"
},

The key html-eex (left) is the language identifier (opens new window) representing the active language. In this example it represents the EEx templates. The value html (right) represents a language emmet knows already. So in the example we are applying emmet for html in files of the type html-eex.

If you want to learn more about it, I suggest you check out the official vscode documentation (opens new window).

And that's it 😁