vscode emmet，如何扩展div。至 other than

Question

我正在与react-css-module做出反应。在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 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，也没有标签扩展 - 只有select和keychord。 emmet扩展路径实际上更复杂。我稍后会补充一点。

Answer 2

open snipptes

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

第2步：像这样自定义您的代码段。

{
    "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>。