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?

Poetess

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

Riser

This does not actually answer the question. What is the snippet that should be used? For those who never wrote any snippet in VSCode this is quite a task – Hypanthium

Answer 2

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

Maidstone

Answer 3

I wasn't able to find anything that worked here, eventually I found this in the VS Code changelog that worked for me. You can set the value for markup.attributes.class* for what you want the attribute to be and then markup.valuePrefix.class* for name of the imported styles.

"emmet.syntaxProfiles": {
    "jsx": {
        "markup.attributes": {
            "class*": "className",
        },
        "markup.valuePrefix": {
            "class*": "styles"
        }
    }
}

Save that for a project in .vscode/settings.json or Shift + Command + P and go to "Preferences: Open user settings (JSON)" and include the config.

Wavellite

Answer 4

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.

Rasia

Answer 5

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

will enable emmet inside jsx but not CSS modules.

Largess

Answer 6

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!

Battledore