占位符是sublime Text代码片段中可编辑的动态字段,用$1、$2等编号表示,插入后可通过Tab键依次跳转编辑;支持默认值${1:default}和多处同步更新,还可结合${TM_FILENAME}、$0等变量提升效率。

sublime text 中的 Placeholders(占位符)是代码片段(Snippets)中可动态编辑的部分,允许你在插入代码片段后快速跳转并修改特定字段。它们让代码片段更具交互性和灵活性。
什么是 Placeholder?
在 Sublime 的 .sublime-snippet 文件中,Placeholder 是用 $1、$2 这样的编号表示的编辑点。当你触发一个代码片段后,光标会自动停在第一个占位符 $1 的位置,按 Tab 键可以依次跳转到下一个占位符(如 $2、$3),直到所有占位符都被填写完毕。
例如,你定义了一个 html 锚链接的片段:
<a href="${1:#}">${2:Link Text}</a>
插入该片段后:
- 光标会先位于
href属性值的位置(即#处),你可以直接输入 URL。 - 按下 Tab 后,跳转到链接文本“Link Text”,可替换为你想要的文字。
带默认值的占位符
你可以为占位符设置默认内容,格式为 ${number:default_value}。
-
${1:className}表示第一个可编辑区域,默认文字是 “className”。 - 如果不需要默认值,可以直接写
$1。
多个相同编号的占位符会同步更新。比如:
<div class="${1:modal}"> ${2:Content} </div> <!-- 使用 .${1} 选择器控制样式 -->
当你修改第一个 ${1:modal} 时,下面的 .${1} 也会同步变化,这对 css 或 javaScript 片段特别有用。
特殊占位符变量
Sublime 支持一些内置变量,可在占位符中使用:
-
${TM_FILENAME}:当前文件名 -
${TM_DIRECTORY}:当前文件所在路径 -
${CURSOR}:光标最终停留的位置(可用于无编号定位) -
${SELECTION}:选中的文本(插入片段前)
例如,创建一个日志片段:
console.log('${1:debug}: ', ${2:obj});$0
插入后,先编辑日志标签,Tab 跳到变量名,最后通过 $0 可定义光标最终位置。
如何编写含占位符的 Snippet
打开 Tools → Developer → New Snippet,编辑 xml 内容:
<snippet> <content><![CDATA[ // 创建于 ${1:$CURRENT_YEAR} function ${2:functionName}() { ${0:// body} } ]]></content> <tabTrigger>func</tabTrigger> <scope>source.js</scope> <description>Function with date</description> </snippet>
保存为 function_with_date.sublime-snippet,在 JS 文件中输入 func + Tab 即可触发。
基本上就这些。熟练使用 Placeholder 能大幅提升编码效率,尤其适合重复结构的快速填充。不复杂但容易忽略细节,比如编号顺序和同步机制。