在 sublime text 3 上为自定义 html 元素设置自动完成 [英] set auto complete on sublime text 3 for custom html elements

问题描述

美好的一天，

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

解决方案

您可以创建自定义 .sublime-completions 文件.在 Sublime 中使用 JSON 语法创建一个新文件，使用以下内容(当然根据您的需要定制):

{"scope": "text.html - 源代码，标点符号.definition.tag.begin",完成":[{ "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> where | 是光标位置.

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

第三个示例的工作方式与第二个相同，不同的是 class 现在具有默认值.输入 baz 并点击 Tab 后，此值将突出显示 - 您可以再次点击 Tab 以保持默认值并在开始和结束标记，或者您可以输入自己的值，点击 Tab，然后将光标移动到开始和结束标记之间.

设置好所有内容后，将文件另存为 Packages/User/HTML.sublime-completions，其中 Packages 是选择时打开的文件夹首选项 ->浏览包....

有关更多信息，请点击上面的链接.要了解有关占位符和变量的更多信息，请查看此文档.>

祝你好运！

Good day,

how can I set auto complete on sublime text 3 for custom html elements, like for example if I type: dog then press tab it will become <dog></dog>.. thanks for your answer.

解决方案

You can create a custom .sublime-completions file for this. Create a new file with JSON syntax in Sublime, using the following contents (of course customized to your needs):

{
    "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>" }
    ]
}

In the first example, typing foo and hitting Tab will insert <foo>|</foo> where | is the cursor position.

In the second example, typing bar and hitting Tab will insert <bar class="|"></bar>. The cursor will first be between the quotes following class= so you can enter your own class. Hitting Tab again will place the cursor just before </bar>.

The third example works just like the second, except that the class now has a default value. This value will be highlighted after typing baz and hitting Tab - you can either hit Tab again to keep the default value and move the cursor between the opening and closing tags, or you can enter your own value, hit Tab, and move the cursor to between the opening and closing tags.

Once you have everything set up how you like, save the file as Packages/User/HTML.sublime-completions, where Packages is the folder opened when you select Preferences -> Browse Packages....

For more information, follow the link above. To learn more about placeholders and variables, check out this documentation.

Good luck!

这篇关于在 sublime text 3 上为自定义 html 元素设置自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！