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

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?

Solution 1:^[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

Solution 2:^[2]

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.

Solution 3:^[3]

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"
  },

Solution 4:^[4]

??"emmet.includeLanguages": {
    "javascript": "javascriptreact"
 }

will enable emmet inside jsx but not CSS modules.

Solution 5:^[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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Freestyle09
Solution 2	Jose Munoz
Solution 3	Twiling Life
Solution 4	Kristian Kristiansen
Solution 5	Kishore Kumar Govindaradjou

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]