QQ登录

只需一步,快速开始

微信登录

扫一扫,访问微社区

乐分享

查看: 118|回复: 0

如何在Sublime Text中添加代码片段

[复制链接]

175

主题

309

帖子

3449

积分

超级版主

Rank: 8Rank: 8

积分
3449
发表于 2018-11-30 11:03:14 | 显示全部楼层 |阅读模式
本帖最后由 大梦 于 2018-11-30 11:10 编辑

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet(代码片段)功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。

创建方法:Tools (工具)> New Snippet(新片段)

此时,会出现如下代码:
  1. <snippet>
  2.     <content><![CDATA[
  3. Hello, ${1:this} is a ${2:snippet}.
  4. ]]></content>
  5.     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  6.     <!-- <tabTrigger>hello</tabTrigger> -->
  7.     <!-- Optional: Set a scope to limit where the snippet will trigger -->
  8.     <!-- <scope>source.python</scope> -->
  9.     <!-- <description>description</description> -->
  10. </snippet>
复制代码


其中,content中由CDATA包裹起来的部分是我们要插入的代码片段,可选。

tabTrigger是我们tab键触发的自动补全代码功能的一个名字,可选。

scope,可选,使用范围,不填写代表对所有文件有效。附:source.css和test.html分别对应不同文件。

description,可选,在snippet菜单中的显示说明(支持中文)。如果不定义,菜单则显示当前文件的文件名。

${1:this}表示代码插入后,光标所停留的位置,可同时插入多个。其中:this为自定义参数(可选)。
${2}表示代码插入后,按Tab键,光标会根据顺序跳转到相应位置(以此类推)。

现在,你应该有了个大致的了解。那我们就开始自己动手编写一个实例。我们都知道,再Sublime中,输入!或者html:5再按tab键,可以自动补全HTML结构,但是这个结果相对很简单,我自己扩展了它的结果内容,新增了几个mate标签,增加了页面描述。
  1. <snippet>
  2.     <content><![CDATA[
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Document</title>
  8.     <meta name="Generator" content="Sublime Text3">
  9.     <meta name="Author" content="dunizb">
  10.     <meta name="website" content="http://www.mybry.com">
  11.     <meta name="Description" content="读你,这世间唯有梦想和好姑娘不可辜负~~">
  12.     <link type="image/x-icon" rel="shortcut icon" href="image/favicon.ico" />
  13.     <script type="text/javascript">
  14.         ${1:}
  15.     </script>
  16. <body>
  17.     ${2:这是html内容}
  18. </body>
  19. </html>
  20. ]]></content>
  21.     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  22.     <tabTrigger>hjs</tabTrigger>
  23.     <!-- Optional: Set a scope to limit where the snippet will trigger -->
  24.     <!-- <scope>source.python</scope> -->
  25.     <description>custom-html</description>
  26. </snippet>
复制代码


然后保存代码片段(xxx.sublime-snippet),保存到Sublime Text3\Data\Packages\User下面,取个名字


就这样,在HTML页面中输入hjs+tab,就可以自动补全这一系列代码了。

文章首发于《读你》博客http://dunizb.com,转载请注明出处

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一场繁花似锦的梦!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋| 乐分享

GMT+8, 2019-5-20 23:27 , Processed in 0.072643 second(s), 21 queries .

快速回复 返回顶部 返回列表