1.如何创建sublime代码片段？通过tools>developer>new snippet生成模板，编辑xml文件中的<content>代码内容、<tabtrigger>触发词和<scope>适用语言环境，保存为.sublime-snippet文件即可；2.常见问题包括触发词冲突、scope不匹配、变量占位符$1/$2使用和多行内容支持；3.推荐实用片段如html5结构、react函数组件和css flex居中布局。自定义代码片段能显著提升开发效率，只需一次配置即可长期受益。
用 Sublime Text 写代码时，你有没有遇到过重复输入相同结构的情况？比如写 HTML 的
div结构、 JavaScript 的函数模板，或者常用的 CSS 样式块。这些重复操作虽然不难，但确实费时间。这时候，自定义代码片段就能帮你省下不少功夫。
Sublime 的代码片段功能其实挺简单，只要设置一次，以后敲几个字母就能自动补全一大段代码。下面我分几个步骤讲讲怎么在 Sublime 里自己加代码片段，真正实现“一次配置，长期受益”。
怎么创建一个代码片段？
Sublime 的代码片段是通过
.sublime-snippet文件来定义的。你可以通过菜单栏选择 Tools > Developer > New Snippet 来生成一个模板。
它会打开一个 XML 格式的文件，里面有几个关键标签：
<content>
：你要插入的代码内容<tabTrigger>
：你按哪个快捷键触发这个片段（比如输入log
然后按 Tab）<scope>
：这个片段适用的语言环境，比如source.js
是 JS，text.html.basic
是 HTML
举个例子，你想快速打出
console.log()，可以这样写：
<snippet>
<content><![CDATA[console.log($1);]]></content>
<tabTrigger>log</tabTrigger>
<scope>source.js</scope>
</snippet>保存的时候建议命名清晰，比如
log.sublime-snippet，然后保存到默认弹出的那个目录里就行。
常见问题和使用技巧
有时候你会发现设置好了却不起作用，这可能是因为以下几点没注意：
- Tab 触发词冲突：如果你用了别人插件里的触发词，可能会被覆盖。可以试着换个名字。
- Scope 不对：比如你在 HTML 文件里用了只适用于 JS 的 snippet，那当然不会生效。
-
变量占位符使用：像上面例子中的
$1
表示光标位置，你可以设置多个位置，比如$2
，按 Tab 可以依次跳转。 - 多行内容也支持：不只是单行代码，你可以写整个函数、组件结构，甚至带缩进的 HTML 模板。
推荐几个实用的自定义片段
这里给你几个日常开发中比较有用的片段思路，可以根据自己的习惯调整：
-
HTML 快速结构
- 触发词：
html5
- 内容：完整的 HTML5 模板
- 触发词：
-
React 函数组件
- 触发词：
rfc
- 内容：导出一个带 props 的函数组件
- 触发词：
-
CSS Flex 居中布局
- 触发词：
flexcenter
- 内容：
display: flex; justify-content: center; align-items: center;
- 触发词：
你可以根据自己项目中高频出现的代码结构去定制，越常用越值得做。
基本上就这些。别看刚开始要写 XML 文件有点麻烦，其实习惯了就是几分钟的事，换来的是长期节省时间的效果。而且一旦设置好，几乎不用再动了。不复杂，但很容易被忽略。
