sublime text 批量添加 snippet 便捷方法 | Phpvar's Blog

 sublime text 使用 snippet, 能快捷的录入常用代码，批量添加 snippet 更能大大提高录入代码的效率！

sublime text 常规添加 snippet 方法：菜单栏 tools-new snippet , 查看打开的新标签的注释部分就可看明白：tabTrigger 标签内填写要触发录入 snippet 代码的标识符（一般为字符串组合)，content 标签填写 snippet 代码。

如我要实现在 sublime text 录入 cc:ie8 时就自动插入 “针对 ie8 及更低版本的条件注释”，示例如图：

然后将该文件保存成以. sublime-snippet 为后缀的 ***.sublime-snippet 文件，存放位置一般放在 sublime text 根目录下的 \Data\Packages\User\ 目录里面。当然你也可在 user 目录下建一个自定义的分类目录如：html-snippet 目录，该目录用于集中存放所有 html snippet 。

但这个常规的添加 snippet 方法有个明显的问题：snippet 都是以单个文件存放的，要添加的 snippet 数量多的话，会保存一堆的 snippet 文件！！

幸运的是我们有 emmet!

利用 emmet 批量添加 snippet 方法：

依次打开 preferences-package settings-emmet-settings user, 打开 Sublime Text Build 3065\Data\Packages\User\Emmet.sublime-settings 文件，该文件的默认都有哪些配置可查看：

https://github.com/sergeche/emmet-sublime/blob/master/Emmet.sublime-settings

其实 emmet 官方有提供自定义 snippets 和 preferences 的参考链接：

http://docs.emmet.io/customization/snippets/

http://docs.emmet.io/customization/preferences/

上面 2 个链接内容是叫我们自己在 sublime text 的 user 目录下创建 snippets.json 和 preferences.json 文件以实现自定义 snippets 和 preferences，但实际上我们可以在刚打开的 Emmet.sublime-settings 文件中，添加 snippets、preferences 键值对，以实现对应功能！

批量添加 snippet 示例截图：

简短的 html,css snippet 推荐编辑 Emmet.sublime-settings 文件实现，但对于多行的带换行或缩进格式的代码段还是推荐以单个. snippet 文件保存，这样可省去大量的 \ n \t 的转义录入。

这里展示了 emmet 默认所有的快捷录入方式：http://docs.emmet.io/cheat-sheet/ ，如果里面有定义，又符合自己的录入习惯的话，就没必要再自己定义啦。

但编辑 Emmet.sublime-settings 文件只能批量添加 html,css 的 snippet，并不支持 js 的 snippet，这个只能说 emmet 本身的功能定位问题所限！

js 批量录入 snippet 实现方法：

在 sublime text user 目录下新建. sublime-completions 文件，录入 snippet 格式如下：

 

关于. sublime-completions 文件的详细介绍，可看下面非官方介绍：

http://docs.sublimetext.info/en/latest/reference/completions.html

需要注意的是经本人测试：.sublime-completions 文件并不能实现多 css snippet 的录入，但上面介绍的 emmet 批量录入 css snippet 扩展功能正好能解决. sublime-completions 不能实现多 css snippet 的录入的问题，两者正好形成互补，最终实现 html,css，js 批量录入 snippet 的功能！！！