☰

香草崇高文本

tag-icon • tag-icon keyboard-shortcuts sublime-text-2
香草崇高文本

我经常使用 Sublime，我发现自己经常输入许多相同的样板代码。

例如，一些平凡的事情

<div class="row">
</div>

有什么方法可以创建一个快捷键（例如CTRL+之类的键r）来加快每次的速度？

答案1

无需任何附加插件（“vanilla” Sublime Text）和使用 Emmet 插件即可实现这个简单的任务。

香草崇高文本

您可以创建重复代码模板的代码片段。单击工具→新的片段...，将打开一个新文件：

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

您可以在 CDATA 块中输入代码模板：

(...)
    <content><![CDATA[
<div class="row">
    ${1:<!-- code goes here -->}
</div>
]]></content>
(...)

然后取消注释<scope>标签（Ctrl+ /）并text.html在其中输入：

<scope>text.html</scope>

现在取消注释<tabTrigger>并将您的简写短语放入其中，例如：

<tabTrigger>row</tabTrigger>

最后，保存文件。Sublime Text 将打开节省窗口的User目录中。将代码片段保存在那里或创建您自己的子文件夹。文件名将成为代码片段的名称。扩展名必须是.sublime-snippet。在我的例子中，完整路径将是：

C:\Users\gronostaj\AppData\Roaming\Sublime Text 3\Packages\User\Bootstrap row.sublime-snippet

以下是完整片段：

<snippet>
    <content><![CDATA[
<div class="row">
    ${1:<!-- code goes here -->}
</div>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>row</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

要使用它，只需打开任何 HTML 文档，确保突出显示设置为 HTML，输入row（标签的简写<tabTrigger>）并按Tab或Ctrl+ Space。 Sublime Text 将展开代码片段：

扩展片段图像

请注意，由于我设置了一个模板变量，因此标签的内容会自动突出显示。您可以添加更多内容（例如${2:...}，${3:...}），并使用在它们之间导航Tab。重复使用变量编号会将变量内容绑定在一起（即，在一个地方更改它将影响所有地方）。

埃米特

Emmet 是每个开发人员必备的工具。首先你必须安装包控制。然后在 Sublime Text 中按Ctrl+ Shift+，输入并按。Package Controll 将下载可用插件列表。输入并按安装它。进度将显示在状态栏中。然后重新启动 Sublime Text。PinstallEnteremmetEnter

Emmet 将支持使用 CSS 选择器构建 HTML。例如，您可以输入.row任何 HTML 文档，然后按Tab以下方式查看：

<div class="row"></div>

Emmet 还可以做更多的事情 - 试试这个：

aside.sidebar>.links>ul>li>a.sidebarLink[target=_blank]

然后按下Tab并观看艾米特的魔法在你眼前发生：

<aside class="sidebar">
    <div class="links">
        <ul>
            <li><a href="" class="sidebarLink" target="_blank"></a></li>
        </ul>
    </div>
</aside>

相关内容