React, Emmet, Visual Studio Code, and CSS-Modules

Question

Is there a way to configure emmet in visual studio code to use React's CSS modules?

When I type... div.container and hit tab, it becomes <div className="container"></div>

The problem here is that it's not using CSS Modules. I'd like it to become this: <div className={styles.container}></div>

Is there a way to get this functionality in VS code?

Answer 1

Yes you can do it, but I think you must create your own SNIPPET. From VSCODE documentation:

ON MAC: Code -> Preferences -> User Snippets and call it whatever you want

When you open that snippet file look on this:

{
    "For_Loop": {
        "prefix": "for",
        "scope": "javascript,typescript",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}

You can do many placeholders or any other variables, here is the link: https://code.visualstudio.com/docs/editor/userdefinedsnippets

I think you may use this variable

TM_CURRENT_LINE - The contents of the current line

I hope it helps