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

Question

在 ST3 中，如果您在 HTML 字段中键入 <st，它会显示自动完成的已知标签：

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

我该怎么做？

常规的 sn-ps 在这里是不够的，只要它们没有出现在 nice typeahead 中。

Answer 1

我不熟悉您尝试生成的语法，但是这个 sn-p (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）就会出现 sn-p。

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

文档：

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

Answer 2

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

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

实现这些自动完成的最简单方法是在Sublime Text Build 3059 x64\Data\Packages\User 文件夹中创建HTML.sublime-completions 文件。 （由于我在 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，在 Sublime Text Build 3059 x64\Data\Packages\User 文件夹中制作了 HTML.sublime-snippet 文件。我放了

<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>。所以我分别保存了多个sn-p文件。

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

在eq.sublime-snippet 文件中，并且

<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>

在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 文件中。但是这些也不能完全解决我的问题。

我尝试了类似${1/\\/\/} 的方法。但这也不起作用。像eq{\\alpha \\beta \\gamma} 这样使用双\ 不舒服，我可以解决意外的转义\ 问题。

Answer 3

与 cmets 中发布的内容相反，有一种非常简单的方法可以使用 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 只需用这些词填充完成列表。