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

您可以使用 Emmet div.{styles.container}=>tab
并获取<div className={styles.container}></div>

vs 代码设置

"editor.autoClosingBrackets": "always",
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "typescript": "typescriptreact"
},

Answer 2

是的，你可以做到，但我认为你必须创建自己的片段。来自 VSCODE 文档：

在 MAC 上：Code -> Preferences -> User Snippets 并随意命名

当您打开该片段文件时，请查看以下内容：

{
    "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/userdefinesnippets

我想你可以使用这个变量

TM_CURRENT_LINE - The contents of the current line

我希望它有帮助