CODEWITHSUNDEEP
reactjsvisual-studio-codeemmetcss-modulesreact-css-modules
MattEnth
MattEnth

Reputation: 873

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?

Upvotes: 14

Views: 6748

Answers (7)

almas_ue
almas_ue

Reputation: 1

just write

h2.{styles.className}

final:

<h2 className={`${styles.className} title`}></h2>

Upvotes: 0

betamax
betamax

Reputation: 14061

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.

Upvotes: 5

Twiling Life
Twiling Life

Reputation: 91

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

Upvotes: 9

Kristian Kristiansen
Kristian Kristiansen

Reputation: 11

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

will enable emmet inside jsx but not CSS modules.

Upvotes: 0

Kishore Kumar Govindaradjou
Kishore Kumar Govindaradjou

Reputation: 37

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!

Upvotes: -2

Freestyle09
Freestyle09

Reputation: 5508

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

Upvotes: 2

Jose Munoz
Jose Munoz

Reputation: 558

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.

Upvotes: 0

Related Questions