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

user_2303562 0
Viewed 5353

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?

emmet react-css-modules css-modules visual-studio-code reactjs
5 Answers

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

user_98337630

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.

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

will enable emmet inside jsx but not CSS modules.

user_133964920

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

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!

user_77990250
Related