Sublime如何自定义代码片段 Snippets快速输入常用模板【进阶】

合法 sublime Snippet xml 文件需以 为根节点，保存为 .sublime-snippet 后缀，置于 Packages/User/ 目录；scope 必须匹配语法作用域（如 source.js），内容推荐用 CDATA 包裹，变量用 $1、${1:default} 等格式。

如何创建一个合法的 Sublime Snippet XML 文件

Sublime 的代码片段本质是 XML 文件，必须严格遵循 sublime-snippet 根节点结构，否则不会出现在片段列表中。常见失效原因就是漏了 外层包裹，或误用 .sublime-completions 扩展名。

• 文件必须保存为 xxx.sublime-snippet（后缀名不能错）
• 根节点必须是 ，内部依次为 、、、
• 中的换行和缩进会被原样插入，建议用 CDATA 包裹多行模板，避免转义问题
• 变量占位符用 $1、$2 表示跳转顺序，$0 是最终光标位置；重复变量如 ${1:name} 可同步更新

      log   source.js   console.log with placeholder ]]>

scope 值怎么填才让片段只在 JS/html/css 中生效

不是文件后缀，而是 Sublime 内部的语法作用域（syntax scope），它由当前文件所用的 .sublime-syntax 或 .tmLanguage 定义。填错 scope 就等于“写了但永远触发不了”。

• JS 文件常用 scope：source.js（ES5）、source.js.jsx（react）、source.ts（typescript）
• HTML 文件：优先用 text.html.basic，若需区分 vue/Svelte 模板，可用 text.html.vue 或 text.html.svelte（依赖对应插件）
• CSS/scss：用 source.css 或 source.scss，不要写成 css 或 .css
• 查当前文件真实 scope：按 Ctrl+Shift+P → 输入 Developer: Show Scope Name，光标所在位置会显示完整 scope 链

带多光标跳转和条件逻辑的高级片段写法

纯 / 只能线性跳转，复杂模板需要变量绑定、默认值、镜像同步甚至简单分支。Sublime 支持基础变量语法，但不支持运行时判断（如 if/else）。

• 同步修改同一变量：${1:className} 在多个位置出现，首次输入后其余位置自动更新
• 设置默认值：${1:defaultText}，Tab 跳过时保留 defaultText；留空 ${1:} 则跳过时不填内容
• 嵌套占位：${2:${1:defaultValue}} 表示第 2 个位置默认取第 1 个位置的值
• 避免意外覆盖：如果片段含 $ 符号（如正则 $1 或 CSS $color），必须写成 $1 或 $color 转义

片段不生效？检查这四个隐藏卡点

多数“写了没反应”问题不在代码本身，而在环境配置或路径细节。

• 片段文件没放在正确目录：应存于 Packages/User/（通过 Preferences → Browse Packages… 打开），而非 Packages/Default/ 或任意子文件夹
• 文件编码不是 UTF-8 无 bom：用 vs code 或 Sublime 自身另存为 UTF-8，BOM 会导致解析失败
• 已有同名 snippet 被插件覆盖：比如 Emmet 也注册了 log，可临时禁用插件测试，或改用更特异的 logd 触发词
• scope 冲突：例如在 JSX 文件中同时匹配 source.js 和 source.js.jsx，Sublime 会选更具体的那个；若你只写了前者，就可能不生效

scope 和文件路径这两项，比内容语法更容易出问题，调试时优先确认它们。