reactjsvisual-studio-codeemmetcss-modulesreact-css-modules

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

  • 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