vscodeemmet，如何扩展div。 <div styleName=''"></div> 除了 <div className=""></div>

Question

我在 react 和 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

查看我编辑过的答案

您可以通过简单的键绑定或 emmet 扩展来实现。这是键绑定：

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

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

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

不涉及 emmet，也没有制表符扩展 - 只有 select 和 keychord。 emmet的扩张路线其实更复杂。稍后再补充。

Answer 2

open snipptes

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

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

所以输入 div,，选择建议然后按 enter 将扩展为 <div styleName=''></div>。

vscodeemmet，如何扩展div。 <div styleName=''"></div> 除了 <div className=""></div>

vscode emmet, how to expand div. to <div styleName=''"></div> other than <div className=""></div>

visual-studio-code

emmet