创建自定义代码片段可大幅提升编码效率，Sublime Text 支持通过 Tools > Developer > New Snippet 创建，编辑 content 定义代码内容，tabTrigger 设置触发词如 html5，scope 指定语言环境如 text.html.basic，description 提供描述，使用 $1、$2 定位光标跳转位置，${1:default} 设置默认值，保存为 .sublime-snippet 文件至 Packages/User/ 目录，在对应文件中输入触发词按 Tab 即可展开，结合 $TM_FILENAME、$CURRENT_YEAR 等变量增强复用性，统一管理片段提升开发流畅度。
Sublime Text 是一款轻量但功能强大的代码编辑器，通过使用 Snippet（代码片段），你可以快速插入常用代码块，大幅提升编码效率。Snippet 允许你定义缩写，输入后按 Tab 键即可自动展开为完整代码结构。
如何创建自定义 Snippet
在 Sublime 中创建自己的代码片段非常简单，步骤如下：
- 点击顶部菜单栏的 Tools > Developer > New Snippet
- 会生成一个模板文件，包含基础 XML 结构
- 修改其中的内容，设置触发词、代码内容和适用语言
- 保存为 .sublime-snippet 文件，推荐放在默认路径下（Packages/User/）
Snippet 基本语法说明
一个典型的 Snippet 文件结构如下：
<snippet><content><![CDATA[
// 这里写你要插入的代码
function ${1:functionName}() {
${2:// code}
}
]]></content>
<tabTrigger>func</tabTrigger>
<scope>source.js</scope>
<description>JavaScript Function</description>
</snippet>
关键字段解释：
- content：实际插入的代码内容，用 CDATA 包裹以避免 XML 解析错误
-
tabTrigger：输入这个关键词后按 Tab 键触发展开，比如输入
func+ Tab -
scope：限定该片段在什么语言环境下生效，如
source.js表示只在 JavaScript 文件中可用 - description：在自动补全列表中显示的描述信息
- $1, $2 等：光标跳转位置，$1 是第一个停靠点，Tab 可依次跳到 $2、$3
- ${1:default}：带默认值的占位符，可直接编辑或替换
实用示例：创建 HTML5 模板片段
新建一个 Snippet，内容如下：
<snippet><content><![CDATA[
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>${1:页面标题}</title>
<link rel="stylesheet" href="${2:style.css}" />
</head>
<body>
${3:<!-- 页面内容 -->}
<script src="${4:main.js}"></script>
</body>
</html>
]]></content>
<tabTrigger>html5</tabTrigger>
<scope>text.html.basic</scope>
<description>HTML5 Template</description>
</snippet>
保存为 html5.sublime-snippet，在 HTML 文件中输入 html5 再按 Tab，就能快速生成标准 HTML5 结构。
提高效率的小技巧
- 使用 Scope 精确控制适用范围，避免冲突，比如 CSS 用
source.css，Vue 文件可用text.html.vue - 结合变量提升复用性，如
$TM_FILENAME插入当前文件名，$CURRENT_YEAR插入年份 - 多个占位符配合 Tab 键快速填写，减少重复输入
- 可通过 Preferences > Browse Packages 进入 User 目录统一管理所有自定义片段
基本上就这些。熟练使用 Snippet 后，你会发现很多重复代码再也不用手动敲了，开发流畅度明显提升。不复杂但容易忽略。
