比如输入 一个 标识 html5 ,然后按下tab键,自动生成我们自己定义好的代码片段. 使用以及适用的场 景有很多.
本文讲的就是利用sublime 本身自带的工具去创建子定义代码片段
菜单栏--> Tools -->Developer-->new snippet...
点击会进入一个页面 , 显示的内容是这样的
屏幕快照 2018-04-04 下午3.11.24.png
注意看第三行 : Hello, ${1:this} is a ${2:snippet}. 这个就是我们要自定义片段代码的内容,将你想要自定义的代码覆盖到这一行即可.
1522825475468.jpg
然后${1} 的意思就是我们进入页面后,第一次光标移入的位置
比如 <tittle>${1:我是标题}</tittle>
当你进入的时候 光标就是放在tittle中间,我是标题的后面
${0}是光标结束的位置
其次 注意看配置项倒数第四行 <tabTrigger>html5</tabTrigger> 记得把注释打开, 这个是这只你要触发的标识. 比如 写个html5 按下tab键 就能生成我们自定义的代码片段;
然后是倒数第二行. <scope>source.html</scope> 定义在哪些文件类型下生效. 比如这里定义的就是只在html文件夹下生效,在其他文件夹下就不生效. 同样记得打开注释.
然后我们保存, 会提示保存到 user 目录下.
1522825467572.jpg
注意命名规范, 比如我们刚才定义的 html5 ,那么这里保存的文件名最好就用html5 , 需要注意的是, 后缀名 一定要用 .sublime-snippet 然后保存即可
接着 我们在html 文件夹下 输入 html5
屏幕快照 2018-04-04 下午3.03.20.png
这时候是会有提示的.
当你按下tab 或者 enter键时, 这时候就会自动生成 代码了
1522825479390.jpg
注意 生成玩的代码段后, 光标是停留在tittle的 Document 后面的. 当你再按下tab键后, 就跑到了body 中. 因为你刚才在body中设置了 ${0} 光标结束的位置. 这个小技巧大家也可以利用下的
网友评论