Vscode: emmet.includeLanguages for one to many mapping

Created on 11 Nov 2018  路  5Comments  路  Source: microsoft/vscode

How can I enable several languages for a given file extension please?

For example

"emmet.includeLanguages": {
        "tt": ["html", "css", "javascript"],
    }

Except this doesn't work. I tried with multiple references to the key

"emmet.includeLanguages": {
        "tt": "html",
        "tt": "css",
        "tt": "javascript",
    }

and also with an embedded object

"emmet.includeLanguages": {
        "tt": {
        "html":"html",
        "css": "css",
        "javascript": "javascript",
    }

no joy :-(


"emmet.includeLanguages": {
        "erb": "html"
    }

_Originally posted by @abnersajr in https://github.com/Microsoft/vscode/issues/9500#issuecomment-339634819_

emmet feature-request help wanted

Most helpful comment

+1 for this feature.
Please add it 馃憤

Use case:

I鈥檓 using an HTML-templates to create my HTML elements inside javascript.
I use an extension for syntax highlighting which works perfectly.
However, Emmet does not work in that file. Only if I add emmet.includeLanguages it will work. But as the limit of language mappings is 1. I can only map HTML or CSS to that JS file. However, I write both, HTML and CSS in that single file.

I鈥檓 sure we are not the only 2.

Thank you!

All 5 comments

63033

@roblourens This is not a duplicate of #63033

@project-delphi Mapping to multiple languages is not supported at the moment. PRs are welcome to add the feature though.

Both the completion provider and the emmet expand command will have to be updated

+1 for this feature.
Please add it 馃憤

Use case:

I鈥檓 using an HTML-templates to create my HTML elements inside javascript.
I use an extension for syntax highlighting which works perfectly.
However, Emmet does not work in that file. Only if I add emmet.includeLanguages it will work. But as the limit of language mappings is 1. I can only map HTML or CSS to that JS file. However, I write both, HTML and CSS in that single file.

I鈥檓 sure we are not the only 2.

Thank you!

@ThibaultJanBeyer Yeah you are not the only 2 :)

We'd also like this to be possible.

A concrete use case for this feature:

  • React in .js files (which is suggested in the React documentation and plays nicer with the Chromium Dev Tools in Electron)
  • A CSS in JS framework like styled-components, also in .js files

With this setup, we must either choose between Emmet in JSX (in our components' render functions) or Emmet in CSS (in our styled-components' template strings).

As a side-note it would be nice if Emmet could be configured not just per file type but also separately for template strings as those often embed other languages in JS. Specifying that Emmet's CSS (or whatever syntax) support should be enabled in template strings only would be more granular than "everywhere in JS" and cover most use cases, I think.

Was this page helpful?
0 / 5 - 0 ratings