React、Emmet、Visual Studio Code 和 CSS 模块

Question

有没有办法在 Visual Studio 代码中配置 emmet 来使用 React 的 CSS 模块？

当我输入...

div.container

并按 Tab 键时，它会变成

<div className="container"></div>

这里的问题是它没有使用 CSS 模块。我希望它变成这样：

<div className={styles.container}></div>

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

Answer 1

您可以使用 Emmet

div.{styles.container}

=> tab
并得到

<div className={styles.container}></div>

与代码设置

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

Answer 2

是的，你可以做到，但我认为你必须创建自己的片段。来自 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/userdefinesnippets

我想你可以使用这个变量

TM_CURRENT_LINE - The contents of the current line

希望对你有帮助

Answer 3

我认为 emmet 还不支持 CSS 模块。即使如此，您仍然必须有一个编辑器无法推断的

styles

对象。这是非常可行的，但我认为最好的方法是使用自定义 babel 插件。

Answer 4

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

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

Answer 5

我找不到任何在这里有用的东西，最终我在 VS Code 变更日志中找到了对我有用的 this。您可以为

markup.attributes.class*

设置您想要的属性值，然后为

markup.valuePrefix.class*

设置导入样式的名称。

"emmet.syntaxProfiles": {
    "jsx": {
        "markup.attributes": {
            "class*": "className",
        },
        "markup.valuePrefix": {
            "class*": "styles"
        }
    }
}

将其保存为

.vscode/settings.json

或 Shift + Command + P 中的项目，然后转到“首选项：打开用户设置 (JSON)”并包含配置。

Answer 6

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

ufeff1) 在 VS Code 中按住

ctrl+shift+p

ufeff2）输入settings.json并选择打开设置（JSON）

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

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

ufeffufeff 希望有帮助！