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的功能!!!