atom代码片段必须写入唯一snippets.cson文件(macos/linux为~/.atom/snippets.cson,windows为%userprofile%.atom\snippets.cson),采用cson格式,严格要求scope匹配、2空格缩进、引号规范及手动重载。

Atom 的代码片段(Snippet)不能直接保存为独立文件供他人复用,必须写入 snippets.cson 文件才能生效;手动创建模板时,缩进、引号、键名大小写全错一个字符就会导致整个 snippet 加载失败。
怎么把自定义 snippet 写进 snippets.cson
Atom 不提供图形化“导出 snippet”功能,所有 snippet 都得手写进用户级配置文件:~/.atom/snippets.cson(macOS/Linux)或 %USERPROFILE%\.atom\snippets.cson(Windows)。该文件是 CSON 格式(CoffeeScript Object Notation),本质是带缩进的键值结构,不是 JSON。
- 用 Atom 打开该文件(不存在就新建),确保顶层是对象字面量,用花括号
{}包裹 - 每个 snippet 归属于一个语言作用域,比如
"source.js"或"text.html.basic",不能写成"javascript"或"html" - 缩进必须用空格(2 或 4 个),不能用 Tab;CSON 对空白敏感,缩进错位会导致解析失败
- 触发关键词(
prefix)和展开内容(body)都必须用双引号包裹,且body中的换行和缩进会原样输出,建议用三重双引号"""包裹多行内容
示例:为 JavaScript 添加一个 log 快捷片段:
'.source.js':
'console.log':
'prefix': 'log'
'body': 'console.log($1);$0'
为什么 scope 写错就完全不触发
Atom 通过当前编辑器的 grammar(语法标识)匹配 snippet 作用域,不是靠文件后缀。比如 .vue 文件里 <script></script> 块实际使用的是 source.js,而 <template></template> 是 text.html.vue。写成 "source.jsx" 却在普通 .js 文件里用,snippet 就不会出现。
- 查当前作用域:按
Cmd+Shift+P(macOS)或Ctrl+Shift+P(Win/Linux),输入 “Editor: Log Cursor Scope”,光标所在位置的作用域会显示在开发者工具控制台 - 常见 scope 值:
source.css、source.scss、text.html.basic、source.python,注意没有html或py这类简写 - 多个 scope 可共用同一 snippet:把同一段定义复制到不同 scope 键下,或用数组形式(但需确保 Atom 版本 ≥ 1.40)
body 里的 $1、$0 是什么
这是 tab stop(制表位)标记,决定光标在展开后跳转的位置和顺序。$1 是第一个停靠点,$2 是第二个……$0 是最终退出点(通常放在末尾)。如果漏写 $0,按 Tab 会一直卡在最后一个 $N 上。
-
$1展开后会被选中,可直接输入覆盖;再次按 Tab 跳到$2,依此类推 - 多个同编号(如两个
$1)会同步更新,适合重复字段(如函数名声明 + 调用) - 支持默认值:
${1:defaultValue},展开时显示默认文本,可编辑 - 避免在
body里写未转义的$,否则会被误认为 tab stop——要用\$
例如 Vue 组件模板 snippet:
'.source.js':
'Vue component':
'prefix': 'vcmp'
'body': """
export default {
name: '${1:ComponentName}',
props: {
${2:// props}
},
data() {
return {
${3:// data}
}
}
}
$0
"""
真正麻烦的是 scope 判断和 CSON 缩进——改完 snippets.cson 后 Atom 不自动重载,必须重启或执行 Window: Reload;而一旦语法出错,Atom 会在启动时静默禁用整个 snippets 模块,连自带的 snippet 都不工作,这时候只能删掉文件重来。











