【问题标题】:Is there a way to make custom Emmet abbreviations that input variables before expanding?有没有办法在扩展之前制作输入变量的自定义 Emmet 缩写?
【发布时间】:2018-09-08 22:13:57
【问题描述】:

所以,我在 Sublime Text 3 上使用 Emmet,并且我已经想出了如何进行自定义 sn-ps(在执行扩展缩写命令时直接替换而不进行预处理),

"jq": "<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous' ></script>${child}"

以及如何自定义缩写

"sym": "svg[width=${1} height=${1}]>symbol[ id='${2}' viewBox='0 0 ${1} ${1}']"

扩展到

<svg width="|" height="|">
    <symbol id="" viewBox="0 0 | |"></symbol>
</svg>

我想知道的是,是否有办法制作自定义缩写,以便将一些变量输入到缩写中

sym:w200h100x0y0#myCustomSymbol

扩展到

<svg width="200" height="100">
    <symbol id="myCustomSymbol" viewBox="0 0 200 100">|</symbol>
</svg>

我认为这是可能的,因为我们可以将 CSS 中的链接 w100 扩展为 width:100px。

...对于那些偶然发现这篇文章并试图了解如何进行自己的自定义的人来说,您可以转到 Preferences>Package Settings>Emmet>Settings - User 这将打开您编写自定义内容的 json 的文件。 Preferences>Package Settings>Emmet>Settings - 默认显示应该如何格式化。

{
    "variables": {
        "lang": "en",
        "greet":"Greetings and Salutations from the People of Earth"
    },
    "snippets": {
        "css": {
            "abbreviations": {
                "tsh": "text-shadow:${1:hoff} ${2:voff} ${3:blur} ${4:#000};"
            },
        },
        "html": {
            "snippets": {
                "jq": "<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous' />${child}",
                "hi":"<div>\n\t${greet}\n</div>"
            },
            "abbreviations": {
                "sym": "svg[width=${1} height=${1}]>symbol[ id='${2}' viewBox='0 0 ${1} ${1}']",
                "hello":"h1>{${greet}}>span"
                // variables can't be placed at the end of an abbreviation, for some reason.
                // however h1>{${greet}} expands correctly if explicit typed in the html document.
            }
        }
    },
    "preferences": {
        "css.valueSeparator": ": ",
        "css.propertyEnd": ";"
    },
}

【问题讨论】:

    标签: sublimetext3 emmet


    【解决方案1】:

    不,Emmet 中没有这样的选项。它假定您应该先扩展缩写,然后通过 Tab 键填写字段

    【讨论】:

      猜你喜欢
      • 2019-12-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-09-04
      • 2018-11-04
      • 2019-12-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多