IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    sublime text批量添加snippet便捷方法

    phpvar发表于 2016-05-06 00:40:39
    love 0
    sublime text使用snippet,能快捷的录入常用代码,批量添加snippet更能大大提高录入代码的效率!
    sublime text常规添加snippet方法:菜单栏tools-new snippet ,查看打开的新标签的注释部分就可看明白:tabTrigger标签内填写要触发录入snippet代码的标识符(一般为字符串组合),content标签填写snippet代码。 如我要实现在sublime text 录入cc:ie8时就自动插入“针对ie8及更低版本的条件注释”,示例如图: snippet 然后将该文件保存成以.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示例截图: setting 简短的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格式如下: autocomplete   关于.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的功能!!!


沪ICP备19023445号-2号
友情链接