自定义代码片段可提升编码效率。通过Tools→Developer→New Snippet创建模板,修改content定义插入代码,tabTrigger设置触发词,scope指定语言范围,保存为.sublime-snippet文件。输入触发词后按Tab即可插入,光标按$1、$2顺序跳转。适用于HTML、JS等重复结构,建议存放于Packages/User目录,可通过Tools→Snippets管理,确保scope匹配以正常使用。

在 Sublime Text 中,代码片段(Snippet)能大幅提升编码效率。通过自定义 snippet,你可以用简短的触发词快速插入常用代码块。创建和使用过程简单直观。
创建代码片段
点击菜单栏的 Tools → Developer → New Snippet…,Sublime 会生成一个 snippet 模板文件。
模板内容如下:
<snippet><content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: 设置触发词和作用域 -->
<tabTrigger>hello</tabTrigger>
<scope>source.python</scope>
<description>Say hello</description>
</snippet>
你需要修改几个关键标签:
- content:实际插入的代码,支持 $1、$2 表示跳转光标位置,${1:default} 可设默认值
- tabTrigger:输入这个单词后按 Tab 键触发 snippet
- scope:限定适用语言,如 source.js、text.html.basic
- description:在自动补全列表中显示的描述
编辑完成后,保存为 MySnippet.sublime-snippet,建议放在 Packages/User 目录下。
使用代码片段
打开对应语言的文件(如 HTML 或 JavaScript),输入你设置的 tabTrigger 单词,比如 “myform”,然后按 Tab 键,代码就会自动插入。
插入后,光标会停在 位置,输入内容后再按 Tab 跳到 ,直到结束。
例如,创建一个 HTML 快捷 div 片段:
<content><![CDATA[<div class="$1">
$2
</div>
]]></content>
<tabTrigger>divc</tabTrigger>
<scope>text.html.basic</scope>
在 HTML 文件中输入 divc + Tab,即可快速生成带 class 的 div 结构。
查看和管理已有片段
通过菜单 Tools → Snippets… 可以看到当前可用的 snippets。你也可以前往 Preferences → Browse Packages → User 目录管理所有自定义 snippet 文件。
如果某个 snippet 不生效,检查 scope 是否匹配当前文件类型,或重启 Sublime 确保加载。
基本上就这些。写好一次,以后随时调用,特别适合重复结构如函数模板、HTML 组件、CSS 布局等。不复杂但容易忽略细节,关键是命名清晰、作用域准确。










