Emmet: How to change jsx className behavior for css-modules

Created on 29 Mar 2018 · 8Comments · Source: emmetio/emmet

I'm trying to alter the behavior of emmet for classes in jsx to use a css module rather than a string:

| abr | current | desired |
|---|---|---|
| div.a | <div className="a"></div> | <div className={styles.a}></div> |

However, I can't seem to figure out how to achieve this. as for as I understand I need a custom filter to do this. and I'm not even sure if custom filters are possible.

Is somebody able to point me in the right direction?

Source

midgethoen

👍7

Most helpful comment

@midgethoen do you fix this in vscode?

Moretai on 12 Oct 2018

👍3

All 8 comments

so I overlooked this sentence in the docs:

Each .js file located in extensions folder will be loaded and executed on plugin start-up. Use js files to create your own filters or actions: you can use Emmet modules and bindings to script your editor with JavaScript.

I'm now trying to get this to work

midgethoen on 29 Mar 2018

So I'm using emmet as part of vscode. And although it does support configuring an extensionPath.
it only loads snippets.json and syntaxProfiles.json..

Which took me a while to figure out 😕

so I guess im moving on to trying to understand how emmet integration works in vscode specifically

midgethoen on 29 Mar 2018

Any update for this? I just moved from Atom, and in Atom you have that plugin: https://github.com/ambethia/emmet-jsx-css-modules