有没有办法在visual studio代码中配置 emmet 以使用React的CSS模块?当我键入... div.container并按Tab键时,它变为<div className="container"></div>这里的问题是它没有使用CSS模块。我希望它变成这样:<div className={styles.container}></div>有没有办法在VS代码中获得这个功能?
div.container
<div className="container"></div>
<div className={styles.container}></div>
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
希望能有所帮助
y1aodyip2#
您可以使用 emmet div.{styles.container} =〉选项卡得到<div className={styles.container}></div>vs代码设置
div.{styles.container}
"editor.autoClosingBrackets": "always", "emmet.includeLanguages": { "javascript": "javascriptreact", "typescript": "typescriptreact" },
syqv5f0l3#
我不认为 emmet 支持CSS模块。即使那样,你仍然需要一个编辑器无法推断的styles对象。这是非常可行的,但我认为最好的方法是使用一个定制的babel插件。
styles
cs7cruho4#
"emmet.includeLanguages": { "javascript": "javascriptreact" }
将在jsx中启用 emmet ,但不会在CSS模块中启用。
yx2lnoni5#
通过使用emmet plugin/按照VS代码中的以下步骤可以解决此问题。1)在VS代码中保留ctrl+shift+p2)键入settings.json并选择"打开设置(JSON)"3)打开settings.json文件后,将以下行添加到该文件中。
ctrl+shift+p
希望能有所帮助!
5条答案
按热度按时间xmq68pz91#
是的,你可以这样做,但我认为你必须创建自己的SNIPPET.从VSCODE文档:
在Mac上:代码-〉首选项-〉用户代码段,并根据需要调用它
当您打开该代码片段文件时,请查看以下内容:
你可以做许多占位符或任何其他变量,这里是链接:https://code.visualstudio.com/docs/editor/userdefinedsnippets
我想你可以用这个变量
希望能有所帮助
y1aodyip2#
您可以使用 emmet
div.{styles.container}
=〉选项卡得到
<div className={styles.container}></div>
vs代码设置
syqv5f0l3#
我不认为 emmet 支持CSS模块。即使那样,你仍然需要一个编辑器无法推断的
styles
对象。这是非常可行的,但我认为最好的方法是使用一个定制的babel插件。cs7cruho4#
将在jsx中启用 emmet ,但不会在CSS模块中启用。
yx2lnoni5#
通过使用emmet plugin/按照VS代码中的以下步骤可以解决此问题。
1)在VS代码中保留
ctrl+shift+p
2)键入settings.json并选择"打开设置(JSON)"
3)打开settings.json文件后,将以下行添加到该文件中。
希望能有所帮助!