React，Emmet，Visual Studio代码和CSS模块

Question

是否可以在Visual Studio代码中配置emmet以使用React的CSS模块？

当我键入... div.container并点击选项卡时，它变成<div className="container"></div>

这里的问题是它没有使用CSS模块。我希望它成为这个： <div className={styles.container}></div>

是否可以通过VS代码获得此功能？

Answer 1

是的，您可以做到，但是我认为您必须创建自己的SNIPPET。从VSCODE文档中：

在MAC上：代码->首选项->用户代码段，然后随意命名

打开该代码段文件时，请查看以下内容：

{
    "For_Loop": {
        "prefix": "for",
        "scope": "javascript,typescript",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}

您可以执行许多占位符或任何其他变量，这是链接： https://code.visualstudio.com/docs/editor/userdefinedsnippets

我认为您可以使用此变量

TM_CURRENT_LINE - The contents of the current line

我希望对您有帮助

Answer 2

我认为emmet还不支持CSS模块。即使那样，您仍然必须具有编辑器将无法推断的styles对象。这是非常可行的，但我认为最好的方法是使用自定义babel插件。

Answer 3

通过使用emmet插件/在VS Code中执行以下步骤可以解决此问题。

1）在您的VS代码中按住ctrl+shift+p

2）键入settings.json并选择Open Setting（JSON）

3）打开settings.json文件后，将以下行添加到文件中。

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

希望对您有帮助！

Answer 4

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

将在jsx内启用emmet，但不启用CSS模块。