React、Emmet、Visual Studio Code 和 CSS 模块

Posted 2023-02-21

【中文标题】React、Emmet、Visual Studio Code 和 CSS 模块

【英文标题】：React, Emmet, Visual Studio Code, and CSS-Modules

【发布时间】：2019-04-11 02:24:18

【问题描述】：

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

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

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

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

【参考方案1】：

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

在 MAC 上：代码 -> 首选项 -> 用户片段，随便你怎么称呼它

当您打开该 sn-p 文件时，请查看以下内容：

    "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

希望对你有帮助

【讨论】：

这实际上并没有回答问题。应该使用什么sn-p？对于那些从未在 VSCode 中编写过任何 sn-p 的人来说，这是一项艰巨的任务

【参考方案2】：

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

【参考方案3】：

"emmet.includeLanguages": 
    "javascript": "javascriptreact"
  

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

【参考方案4】：

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

1) 在您的 VS 代码中保留 ctrl+shift+p

2) 输入 settings.json 并选择 Open Setting (JSON)

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

    "emmet.includeLanguages": 
        "javascript": "javascriptreact"
     

 希望对您有所帮助！