reactjs React、 emmet 、Visual Studio代码和CSS模块

4zcjmb1e  于 2023-01-30  发布在  React
关注(0)|答案(5)|浏览(143)

有没有办法在visual studio代码中配置 emmet 以使用React的CSS模块?
当我键入... div.container并按Tab键时,它变为<div className="container"></div>
这里的问题是它没有使用CSS模块。我希望它变成这样:<div className={styles.container}></div>
有没有办法在VS代码中获得这个功能?

xmq68pz9

xmq68pz91#

是的,你可以这样做,但我认为你必须创建自己的SNIPPET.从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/userdefinedsnippets
我想你可以用这个变量

TM_CURRENT_LINE - The contents of the current line

希望能有所帮助

y1aodyip

y1aodyip2#

您可以使用 emmet div.{styles.container} =〉选项卡
得到<div className={styles.container}></div>
vs代码设置

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

syqv5f0l3#

我不认为 emmet 支持CSS模块。即使那样,你仍然需要一个编辑器无法推断的styles对象。这是非常可行的,但我认为最好的方法是使用一个定制的babel插件。

cs7cruho

cs7cruho4#

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

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

yx2lnoni

yx2lnoni5#

通过使用emmet plugin/按照VS代码中的以下步骤可以解决此问题。
1)在VS代码中保留ctrl+shift+p
2)键入settings.json并选择"打开设置(JSON)"
3)打开settings.json文件后,将以下行添加到该文件中。

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

希望能有所帮助!

相关问题