如何在Sublime Text 3中添加自定义HTML标记

Question

在ST3中，如果您在HTML字段中输入<st，则会显示已知的自动填充标记：

对于我的模板引擎TYPO3 Fluid，我需要添加自定义标签（例如<f:for each="" as=""></f:for>）。

我该怎么做？

普通片段在这里是不够的，只要它们没有出现在漂亮的类型中。

Answer 1

与评论中发布的内容相反，使用HTML的自定义.sublime-completions文件有一种非常简单的方法。这些文件很棒，因为您不仅可以拥有自定义标记的简单列表，还可以使用snippet syntax来执行更复杂的任务。

使用JSON语法创建Packages/User/HTML.sublime-completions，并使用以下内容作为起点：

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

    "completions":
    [
        { "trigger": "ffor", "contents": "<f:for each=\"$1\" as=\"$2\">$0</f:for>" },
        { "trigger": "foobar", "contents": "<foobar>$0</foobar>" },

        "baz",
        "quux",
        "thneed"            
    ]
}

当您键入ffor并点击 Tab 时，将插入<f:for each="" as=""></f:for>，光标位于each引号之间。点击 Tab 再次将光标置于as引号之间，并再次点击它将其置于开始和结束标记之间。 foobar触发器只会创建一个常规<foobar></foobar>标记，并在它们之间放置光标。 baz，quux和thneed只需使用这些字词填充完成列表。

Answer 2

我不熟悉您尝试制作的语法，但是这个代码段（Menubar / Tools / New Snippet…）是否适合您？

<snippet>
  <content><![CDATA[f:for each="$1" as="$2"></f:for>]]></content>
  <tabTrigger>f:for</tabTrigger>
  <scope>text.html</scope>
</snippet>

$1和$2表示自动完成后的光标位置（按 tab 将光标从第一个光标位置跳转到第二个光标位置）。

如上所述，只需在HTML文件中输入<f（或完整触发器<f:for）即可显示代码段。

该代码段必须以.sublime-snippet文件扩展名命名，并且必须保存在~/Library/Application Support/Sublime Text 3/Packages/User目录中。不需要重新启动Sublime应用程序。

文档：

http://docs.sublimetext.info/en/latest/extensibility/snippets.html

Answer 3

我最近在Stack overflow - How to add custom auto completion in Sublime Text 3?和sublime User Echo中也提出了类似的问题。

以下实施将很容易解决这个问题。 （但我的问题并没有通过这种方法完全解决。）下面的方法是针对我自己的问题的。但是你可以很容易地弄清楚如何改变它。

实现这些自动完成的最简单方法是在HTML.sublime-completions文件夹中创建Sublime Text Build 3059 x64\Data\Packages\User文件。 （由于我在Windows操作系统中使用ST3的便携版本，因此安装ST3时文件夹可能会有所不同。）使用JSON文本填充文件，如

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

    "completions":
    [
        { "trigger": "eq", "contents": "<eq>$1</eq>" },
        { "trigger": "eqq", "contents": "<eqq>\n\t$1\n</eqq>" }
    ]
}

。但tab触发未启用，但我的Preferences - Settings - User包含与标签相关的功能，例如

{
    [
        "Vintage",
        "BracketHighlighter",
        "SideBarEnhancements"
    ],
    "tab_completion": true,
    "tab_size": 2,
    "translate_tabs_to_spaces": false,
    "use_tab_stops": false,
}

。在这种情况下，仅启用Ctrl+tab触发。怎么了？我不知道。

要解决这些问题，我尝试了Snippets，在HTML.sublime-snippet文件夹中生成Sublime Text Build 3059 x64\Data\Packages\User个文件。我把

<snippet>
    <content><![CDATA[<eqq>
    $0$1
</eqq>]]></content>
    <tabTrigger>eqq</tabTrigger>
    <scope>text.html</scope>
</snippet>
<snippet>
    <content><![CDATA[<eq>$1$0</eq>]]></content>
    <tabTrigger>eq</tabTrigger>
    <scope>text.html</scope>
</snippet>

。在这种情况下，仅启用第一个<snippet>。所以我分别保存了多个片段文件。

<snippet>
    <content><![CDATA[<eq>$0</eq>]]></content>
    <tabTrigger>eq</tabTrigger>
    <scope>text.html</scope>
    <description>eq tag to be rendered by MathJax</description>
</snippet>

<{1>}文件中的

和

eq.sublime-snippet

<{1>}文件中的

和

<snippet>
    <content><![CDATA[<eq>$1$0</eq>]]></content>
    <tabTrigger>eq{$PARAM1}</tabTrigger>
    <scope>text.html</scope>
    <description>eq{inline TeX equation} tag to be rendered by MathJax</description>
</snippet>

<{1>}文件中的

和

eqBraces.sublime-snippet

在<snippet> <content><![CDATA[<eqq> $0 </eqq>]]></content> <tabTrigger>eqq</tabTrigger> <scope>text.html</scope> <description>eqq tag to be rendered by MathJax</description> </snippet> 文件中

。但这些都不能完全解决我的问题。

我试过像eqq.sublime-snippet这样的东西。但这也不起作用。令人不舒服地使用<snippet> <content><![CDATA[<eqq> $1$0 </eqq>]]></content> <tabTrigger>eqq{$PARAM1}</tabTrigger> <scope>text.html</scope> <description>eqq{outline TeX equations} tag to be rendered by MathJax</description> </snippet> 之类的双eqqBraces.sublime-snippet，我可以修复意外的转义\问题。