React，Emmet，Visual Studio Code和CSS-Modules

Question

有没有一种方法可以在 Visual Studio Code 中配置 Emmet 来使用 React 的 CSS 模块？

当我键入... div.container 并按 Tab 键时，它会变成 <div className="container"></div>

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

是否有一种方法可以在 VS Code 中获得此功能？

- MattEnth

Answer 1

你可以使用 Emmet div.{styles.container} => tab，然后会得到：<div className={styles.container}></div>。

vs code 设置

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

- Twiling Life

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/userdefinedsnippets 我认为你可能会使用此变量。最初的回答。

TM_CURRENT_LINE - The contents of the current line

最初的回答

希望这能有所帮助。

- Freestyle09

---

这并没有真正回答问题。应该使用什么片段？对于那些从未在VSCode中编写任何片段的人来说，这是一项相当艰巨的任务。 - smnbbrv

Answer 3

我在这里找不到任何有效的内容，最终在 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然后转到"Preferences: Open user settings (JSON)"并包含配置。

- betamax

Answer 4

我认为 Emmet 还不支持 CSS 模块。即使是这样，你仍然需要一个 styles 对象，而编辑器无法推断出来。这是完全可行的，但我认为最好的方法是使用自定义的 Babel 插件。

- Jose Munoz

Answer 5

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

将在JSX中启用Emmet，但不会在CSS模块中启用。

- Kristian Kristiansen

Answer 6

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

1. 在您的 VS Code 中按住 Ctrl + Shift + P。 2. 输入 "settings.json" 并选择 "打开设置 (JSON)"。 3. 打开 "settings.json" 文件后，在文件中添加以下行。

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

希望能对您有所帮助！

- Kishore Kumar Govindaradjou