React、Emmet、Visual Studio 代码和 CSS-模块

Question

有没有办法在 visual studio 代码中配置 emmet 以使用 React 的 CSS 模块？

当我输入...div.container 并点击 Tab 键时，它变成了 <div className="container"></div>

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

有没有办法在 VS 代码中获得此功能？

Answer 1

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

Answer 2

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

ON MAC：代码 -> 首选项 -> 用户代码段并随意命名

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

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

你可以做很多占位符或任何其他变量，这里是link： https://code.visualstudio.com/docs/editor/userdefinedsnippets

我想你可以使用这个变量

TM_CURRENT_LINE - The contents of the current line

希望对你有帮助

Answer 3

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

1) 在你的 VS 代码中保持 ctrl+shift+p

2) 输入 settings.json 并选择打开设置 (JSON)

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

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

希望对您有所帮助！

Answer 4

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

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

Answer 5

您可以使用 Emmet div.{styles.container} => 选项卡
得到 <div className={styles.container}></div>

对比代码设置

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

React、Emmet、Visual Studio 代码和 CSS-模块

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

emmet

reactjs

visual-studio-code

css-modules

react-css-modules