为自定义 html 元素在 sublime text 3 上设置自动完成答案

【问题标题】：set auto complete on sublime text 3 for custom html elements为自定义 html 元素在 sublime text 3 上设置自动完成
【发布时间】：2014-03-05 04:00:23
【问题描述】：

早安，

如何在 sublime text 3 上为自定义 html 元素设置自动完成，例如，如果我输入：dog 然后按 Tab 它将变为 <dog></dog>.. 感谢您的回答。

【问题讨论】：

标签： sublimetext sublimetext3

【解决方案1】：

您可以为此创建自定义.sublime-completions 文件。在 Sublime 中创建一个带有 JSON 语法的新文件，使用以下内容（当然根据您的需要定制）：

{
    "scope": "text.html - source, punctuation.definition.tag.begin",

    "completions":
    [
        { "trigger": "foo", "contents": "<foo>$0</foo>" },
        { "trigger": "bar", "contents": "<bar class=\"$1\">$0</bar>" },
        { "trigger": "baz", "contents": "<baz class=\"${1:myclass}\">$0</baz>" }
    ]
}

在第一个示例中，输入foo 并点击Tab 将插入<foo>|</foo>，其中| 是光标位置。

在第二个示例中，输入bar 并点击Tab 将插入<bar class="|"></bar>。光标将首先位于class= 后面的引号之间，因此您可以输入自己的课程。再次点击 Tab 会将光标放在 </bar> 之前。

第三个例子和第二个例子一样，除了class 现在有一个默认值。在输入 baz 并点击 Tab 后，该值将突出显示 - 您可以再次点击 Tab 以保持默认值并在开始和结束标签之间移动光标，或者您可以输入自己的值，点击 Tab，然后将光标移动到开始和结束标记之间。

一切设置好后，将文件另存为Packages/User/HTML.sublime-completions，其中Packages 是您选择Preferences -> Browse Packages... 时打开的文件夹。

有关更多信息，请点击上面的链接。要了解有关占位符和变量的更多信息，请查看this documentation。

祝你好运！

【讨论】：