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

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

You can use Emmet div.{styles.container} => tab
and get <div className={styles.container}></div>
vs code settings
"editor.autoClosingBrackets": "always",
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact"
},

Answer 2

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

Answer 3

I don't think emmet supports CSS modules yet. Even then, you'd still have to have a styles object that the editor won't be able to infer. This is very doable but I think the best approach would be using a custom babel plugin.

Answer 4

"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
will enable emmet inside jsx but not CSS modules.

Answer 5

By using emmet plugin / following the below steps in your VS Code can resolve the issue.
1) Hold ctrl+shift+p in your VS Code
2) Type settings.json and choose Open Setting (JSON)
3) Once you have open the settings.json file add the below lines to the file.
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}

Hope it helps!