sublime编辑器的一个使用小技巧: 自定义代码片段

比如输入 一个 标识 html5 ,然后按下tab键,自动生成我们自己定义好的代码片段. 使用以及适用的场 景有很多.

本文讲的就是利用sublime 本身自带的工具去创建子定义代码片段

菜单栏--> Tools -->Developer-->new snippet...

点击会进入一个页面 , 显示的内容是这样的

sublime编辑器的一个使用小技巧: 自定义代码片段_第1张图片
屏幕快照 2018-04-04 下午3.11.24.png

注意看第三行 : Hello, ${1:this} is a ${2:snippet}. 这个就是我们要自定义片段代码的内容,将你想要自定义的代码覆盖到这一行即可.

sublime编辑器的一个使用小技巧: 自定义代码片段_第2张图片
1522825475468.jpg

然后${1} 的意思就是我们进入页面后,第一次光标移入的位置
比如 ${1:我是标题}
当你进入的时候 光标就是放在tittle中间,我是标题的后面
${0}是光标结束的位置

其次 注意看配置项倒数第四行 html5 记得把注释打开, 这个是这只你要触发的标识. 比如 写个html5 按下tab键 就能生成我们自定义的代码片段;

然后是倒数第二行. source.html 定义在哪些文件类型下生效. 比如这里定义的就是只在html文件夹下生效,在其他文件夹下就不生效. 同样记得打开注释.

然后我们保存, 会提示保存到 user 目录下.


sublime编辑器的一个使用小技巧: 自定义代码片段_第3张图片
1522825467572.jpg

注意命名规范, 比如我们刚才定义的 html5 ,那么这里保存的文件名最好就用html5 , 需要注意的是, 后缀名 一定要用 .sublime-snippet 然后保存即可

接着 我们在html 文件夹下 输入 html5


屏幕快照 2018-04-04 下午3.03.20.png

这时候是会有提示的.
当你按下tab 或者 enter键时, 这时候就会自动生成 代码了

sublime编辑器的一个使用小技巧: 自定义代码片段_第4张图片
1522825479390.jpg

注意 生成玩的代码段后, 光标是停留在tittle的 Document 后面的. 当你再按下tab键后, 就跑到了body 中. 因为你刚才在body中设置了 ${0} 光标结束的位置. 这个小技巧大家也可以利用下的

你可能感兴趣的:(sublime编辑器的一个使用小技巧: 自定义代码片段)