Sublime Text 3中是否有任何功能蓝图/自动完成功能？

Question

我正在寻找一种基本上可以在崇高文本中绘制功能蓝图的东西。

示例： 使用JavaScript进行编码时，您可以输入<template> <div id="wrapper"> <div class="rightTopper"> <span class="BCN">BCN</span> <img :src="bitcoin" /> <span class="amount">{{ coins }}</span> </div> <div class="main"> <ul> <li v-for='item in items'> {{ getColor(item.painted) }} {{ item.name }} <span :style="{'color': loopColor}"> {{ item.painted }} </span> </li> </ul> </div> </div> </template> <script> import bitcoin from '../assets/bitcoin.svg' export default { name: 'landing-page', data() { return { coins: 100.0712, bitcoin, items: [ {name: 'myst', painted: 'pink'}, {name: 'dig', painted: 'red'}, {name: 'zord', painted: 'grey'} ], loopColor: '' } }, methods: { getColor: function(color) { switch (color) { case color === 'pink': this.loopColor = 'pink' return true break; default: } } } } </script> <style lang="sass" scoped> * box-sizing: border-box margin: 0 padding: 0 font-family: 'Oxygen', sans-serif li list-style: none .rightTopper float: left margin-right: 20px margin-top: 10px font-size: 20px font-weight: bold .amount display: inline-block background-color: rgba(0,100,255,0.1) padding: 5px border-radius: 3px img display: inline-block height: 30px width: 30px .BCN position: absolute margin-top: -10px font-size: 15px color: gray </style>，然后显示一个弹出窗口。

点击Enter将产生此功能蓝图：

很方便，很明显。我正在寻找可以完全相同的功能，但需要自定义功能。例如，对于此功能：

fun

当我输入function asynchFunction(callback) { // doStuff callback(arguments); } （或其中的一部分）并在弹出窗口中按Enter键时，我希望得到以下蓝图：

asynchFunction

Sublime Text 3是否存在类似的内容？

Answer 1

您要寻找的是snippet。您要在问题中描述的是默认JavaScript包中Sublime附带的一个，但是您可以适当添加自己的内容。

要使用上述内容进行设置，可以从菜单中选择Tools > Developer > New Snippet...来创建存根片段，然后进行相应的修改。

对于您的示例，结果看起来像这样：

<snippet>
    <content><![CDATA[
asynchFunction(function(${1:arguments}) {
    ${0:// body...}
});
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>asyncFunction</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.js</scope>
    <description>Async Function</description>
</snippet>

tabTrigger是触发代码段的文本，它是自动完成弹出窗口中文本的第一部分。 description也在弹出窗口中用于描述代码段的用途，从而为您提供一些上下文。

scope（此处为source.js）确定代码段在哪些文件中可用。如果不加说明，该代码段将随处可见，因此将其设置为仅显示在JavaScript源中。

进行更改（如果有）之后，请使用一些描述性名称和扩展名User，将文件保存在Sublime将默认为的位置（您的sublime-snippet包）中，很好。

保存该代码段后，它将在必要时自动开始显示，包括以Snippet:命令的形式出现在命令面板中，包括从菜单中选择Tools > Snippet...时。

有关片段本身的更多详细信息，请参见上面的链接文档，但总之：

• 诸如${1:text}之类的项目是fields； text是该字段的默认文本， Tab 以数字顺序从1开始在字段之间跳过。片段中可能会出现具有相同字段编号的多个项目；在您编辑该字段时，它们都会一次更改。
• ${0}字段很特殊，它指示您浏览完所有字段后光标应在何处结束。默认值是摘要内容的结尾（如果不存在）。
• 由于上述原因，代码段正文中的$字符是特殊字符；如果要在摘要中插入文字$字符，请改用\$。
• 无论您认为不需要多少，都不要删除![CDATA[和]]>文本。