Atom如何添加代码片段？Atom自定义Snippets创建教程-atom-PHP中文网

atom代码片段需手动编辑snippets.cson文件实现，路径为macos/linux的~/.atom/snippets.cson或windows的%userprofile%.atom\snippets.cson，语法须符合cson规范（2空格缩进、字符串加引号、三重单引号包多行），修改后必须完全重启atom，且scope须与当前文件真实作用域一致。

atom如何添加代码片段？atom自定义snippets创建教程

Atom 的代码片段（snippets）不是通过图形界面添加的，而是靠编辑 snippets.cson 文件实现——改错路径、语法不合法、未重启 Atom 是最常见的三个失败原因。

snippets.cson 文件在哪？路径必须准确

Atom 不提供“新建 snippet”的按钮，所有自定义片段都写在用户级 snippets.cson 里。这个文件默认不存在，需要手动创建：

macOS：~/.atom/snippets.cson
Windows：%USERPROFILE%\.atom\snippets.cson
Linux：~/.atom/snippets.cson

注意：不是 init.coffee，也不是 config.cson；路径中的 .atom 是隐藏文件夹，别漏掉点号；文件后缀必须是 .cson（CoffeeScript 的安全 JSON 格式），不能用 .json 或 .coffee。

snippet 语法怎么写？CSON 格式有严格缩进和标点

CSON 要求缩进统一（推荐 2 空格），键名不用引号，但字符串值必须用单引号或双引号。一个典型 Vue 模板片段示例：

'.source.vue':
  'vue template':
    'prefix': 'vtemp'
    'body': '''
      <template>
        $1
      </template>
    '''

关键点：

.source.vue 是作用域（scope），决定该 snippet 在哪种文件中生效；可用 Cmd+Shift+P → Editor: Log Cursor Scope 查看当前光标所在 scope
prefix 是触发关键词，输入 vtemp 后按 Tab 即展开
body 中的 $1 是第一个跳转位，$2 是第二个，支持多光标定位
三重单引号 ''' 包裹多行内容，避免手动写换行符和转义

为什么写了没反应？检查这三件事

最常卡在这几个环节：

Atom 没重启：修改 snippets.cson 后必须完全退出 Atom（不只是关闭窗口），再重新打开
scope 写错了：比如想在 JavaScript 文件中触发，却用了 .source.js（正确是 .source.js），实际应查当前文件真实 scope，常见 JS 是 .source.js，React JSX 是 .source.js.jsx
语法报错：CSON 对末尾逗号、引号、缩进极其敏感。Atom 启动时若发现 snippets.cson 解析失败，会静默忽略整个文件——打开 View → Developer → Toggle Developer Tools，看 Console 是否有 Failed to load snippets 报错

scope 判断不准、CSON 格式稍有偏差、改完没重启——这三个点串起来，就是 90% 的“添加失败”真实原因。