代码emmet，如何扩展div。到<div className=“></div>以外的<div styleName=‘”></div>

Question

我的工作反应反应-css-模块。在jsx中，emment为className提供了.的扩展。但是现在我想扩展：

anytagName. (或anytagName,)

至

<anyTagName styleName=''></anyTagName>

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

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

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

Answer 1

见我编辑的答案Vscode片段变量

您可以通过简单的键绑定或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，也没有选项卡扩展-只有select和keychord。emmet的扩张路线实际上更复杂。我稍后再加一句。

Answer 2

开放片段

step1:像上面那样打开你的用户代码。选择javascript.json。它的目录是~/Library/Application Support/Code/User/snippets。

第二步:像这样定制你的片段。{ "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,，选择建议，然后按enter键展开为<div styleName='$1'>$2</div>。