vscode emmet，如何扩展div。到 <div styleName=''"></div> 而非 <div className=""></div>答案

【问题标题】：vscode emmet, how to expand div. to <div styleName=''"></div> other than <div className=""></div>vscode emmet，如何扩展div。到 <div styleName=''"></div> 而非 <div className=""></div>
【发布时间】：2019-02-06 23:56:50
【问题描述】：

我正在使用 react-css-module 在 react 中工作。在jsx中，emment为.的扩展提供了className。但现在我想扩展：

anytagName.（或anytagName,）

到

<anyTagName styleName=''></anyTagName>

为了使双引号变为单引号，我阅读了一些文档并解决了这个问题。

"emmet.syntaxProfiles": {
    "html": {
        "attr_quotes": "single"
    },
    "jsx": {
        "attr_quotes": "single",
        "self_closing_tag": true
    }
}

如何将某些内容扩展到styleName 属性？

【问题讨论】：

标签： visual-studio-code emmet

【解决方案1】：

open snipptes

第 1 步：像上面一样打开您的用户代码 spipptes。选择 javascript.json。它的目录是~/Library/Application Support/Code/User/snippets。

第二步：像这样自定义你的 sn-ps。 { "div, react-css-module in js": { "prefix": "div,", "body": [ "<div styleName='$1'>$2</div>", ], "description": "" }, "p, react-css-module in js": { "prefix": "p,", "body": [ "<p styleName='$1'>$2</p>", ], "description": "" }, "span, react-css-module in js": { "prefix": "span,", "body": [ "<span styleName='$1'>$2</span>", ], "description": "" }, "img, react-css-module in js": { "prefix": "img,", "body": [ "<img styleName='$1' alt= '$2'", " src={$3}", " srcSet={`", " ${$4} 2x", " ${$5} 3x", " `} ", "/>", ], "description": "" }, "image path": { "prefix": "imgpath", "body": [ "'/easicare-mobile/static/images/pages/$1';" ] } }

所以输入div,，选择建议然后按回车将展开为<div styleName='$1'>$2</div>。

【讨论】：

【解决方案2】：

查看我编辑的答案Vscode snippet variable

您可以通过简单的键绑定或 emmet 扩展来做到这一点。这是键绑定：

{
    "key": "ctrl+alt+n",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "<${TM_SELECTED_TEXT} styleName='$1'>$0<\/${TM_SELECTED_TEXT}>"
    }
}

选择您想要的任何键绑定。选择你的anyTag，点击快捷键，它会按照你的意愿展开。

anytagName 变为 <anytagName styleName=''></anytagName>

不涉及 emmet，也没有标签扩展 - 只有选择和键弦。 emmet扩张路线其实比较复杂。我稍后会添加。

【讨论】：

感谢您的建议。它解决了问题。唯一的额外步骤是选择anyTagName。使用 sn-ps 是另一种解决方法。