Sublime识别Snippet只认.sublime-snippet后缀和<scope>标签，文件须存于Packages/User/目录；触发依赖<tabTrigger>与当前文件syntax scope严格匹配，占位符$1、$2控制Tab跳转，$0为最终光标位；不支持逻辑判断，复杂需求需插件实现。
Snippet 文件怎么命名才被 Sublime 正确识别
Sublime 不靠文件扩展名判断 Snippet 类型，而是靠 <scope> 标签内容和文件后缀名 .sublime-snippet。命名本身不影响功能，但必须以 .sublime-snippet 结尾，否则不会出现在 Tools → Developer → New Snippet… 生成的模板里，也无法被触发。
常见错误是命名为 vue-component.snippet 或 react-component.xml —— 这些文件 Sublime 完全忽略。正确命名示例：vue-sfc.sublime-snippet、jsx-props.sublime-snippet。
- 文件必须保存在
Packages/User/目录下（可通过Preferences → Browse Packages…打开） -
<scope>决定触发场景，比如写source.vue就只在 .vue 文件中生效；写source.js jsx表示同时匹配 .js 和 JSX 文件 - 不要在
<description>里塞关键词指望自动补全——Sublime 不读这个字段做匹配
如何让 Tab 键正确跳转到组件名、props、slot 等关键位置
Snippet 的跳转靠 $1、$2 这类占位符，不是靠光标位置或注释。Sublime 按数字顺序聚焦，相同数字（如 $1）会同步更新，适合重复字段（如组件名同时出现在 export default 和 template 中）。
前端组件骨架常需多处联动修改，比如 Vue SFC 中组件名要出现在 name 选项、<template> 标签名、<style scoped> 的 class 前缀。用 $1 统一控制最稳妥。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
<snippet>
<content><![CDATA[
<template>
<div class="${1:ComponentName}-wrapper">
$0
</div>
</template>
<p><script>
export default {
name: '${1:ComponentName}',
props: {},
data() {
return {};
}
};
</script></p><p><style scoped>
.${1:ComponentName}-wrapper {
}
</style>
]]></content>
<tabTrigger>vuec</tabTrigger>
<scope>source.vue</scope>
</snippet>-
$0是最终光标停留位置，通常放在<template>内容区，方便立刻写结构 - 避免使用
$1到$9以外的数字——Sublime 不支持$10，会当普通文本渲染 - 如果某处需要默认值但允许编辑（如 props 默认为空对象），写成
props: ${2:{}},，否则直接写{}就无法跳转编辑
为什么在 JSX 文件里敲 comp 没反应
触发失败大概率是 <tabTrigger> 和当前语法 scope 不匹配。Sublime 的 Snippet 不是全局生效，它严格依赖 <scope> 值与当前文件的 syntax scope 一致。
例如：你写了 <scope>source.js</scope>，但当前文件实际 syntax 是 React JSX（scope 为 source.js.jsx），那 Snippet 就不会出现。查当前 scope 的方法是按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 show scope 回车，看底部状态栏显示的完整 scope 字符串。
- JSX 文件常用 scope 是
source.js.jsx或source.tsx，不是source.js - Vue 文件若用 Vetur 插件，scope 通常是
source.vue；若用 Volar，则可能是source.vue.vue，需对应调整 - tabTrigger 区分大小写，且不能含空格或特殊字符，
my-comp合法，my comp无效
带条件逻辑的组件骨架能用 Snippet 实现吗
不能。Snippet 是纯静态文本模板，不支持 if/else、循环、变量计算等逻辑。所谓“带逻辑”的需求（比如勾选「含 TypeScript」就插入 interface，否则跳过），必须靠插件（如 Emmet 配合自定义配置，或 Sublime Text 4 的新 API + Python 插件）实现。
但可以用变通方式模拟有限分支：准备多个 Snippet，分别对应不同场景，比如 vue-ts.sublime-snippet 和 vue-js.sublime-snippet，tabTrigger 设为 vuec-ts 和 vuec-js，手动选择。
- 别试图用
$1占位符伪装逻辑——比如写${1:/* ts */|interface Props {}|}，Sublime 不解析这种语法，只会原样输出 - 复杂初始化逻辑（如生成 UUID、时间戳、随机 class 名）必须借助插件，Snippet 本身无运行时能力
- 如果只是替换固定组合（如「带 setup script」vs「不带」），拆成两个独立 Snippet，比硬塞逻辑更可靠
真正卡住人的往往不是怎么写，而是 scope 对不上、文件没放对位置、或者误以为 Snippet 能执行代码——它只是高效粘贴的升级版。
