Sublime Text 3自定义snippet

Sublime Text支持自定义代码段,方法很简单,但是很有用,一个关键词,按一下tab,一大段代码就出来了。

1、菜单 Tools -> New Snippet...

2、这时会有一个模板文件,修改就可以了。

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

<content><![CDATA[ 与 ]]></content>之间的代码就是要定义的代码块。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>${1}</title>
    </head>
    <body>
        <h1>${1}</h1>
    </body>
</html>

我们可以将上面的代码段放在块内。

3、上面的代码有${1},当你插入代码段的时候,光标会同时定位到${1}处,同时可以有${2}等,tab键切换到下一个。

也可以这样写${1:this},光标处默认是"this"字符串

4、tabTrigger内是触发代码块的关键词,比如我们可以写上html5。

5、scope内饰触发代码块的文件类型,那我们写上source.html,通常注释掉即可,想在那种触发就触发。

完整的大概就是这样:

<snippet>
    <content><![CDATA[
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>${1}</title>
    </head>
    <body>
        <h1>${1}</h1>
    </body>
</html>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>html5</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.html</scope> -->
</snippet>
时间: 2024-10-10 22:26:11

Sublime Text 3自定义snippet的相关文章

sublime text 2自定义代码片段

本文引用   http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html 对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段.下面介绍一下创建一个html5的代码片段的过程. 在菜单上点击Tools -> New Snippet,(工具->代码段)会新建一个xml文

Sublime Text 3 自定义配置快捷键

Settings-User: { "font_face": "Courier New", "font_size": 14.0, "highlight_line": true, "ignored_packages": [ "Vintage", "SublimeLinter" ], "tab_size": 4, "translate_tabs

Sublime Text 使用指南 - 前端开发神器

Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的是如何使用sublime Text藏在菜单里的一些功能,这些功能十分强大,却因隐藏的较深不太被大家关注,网上相关的介绍文章也不太多,这里就整理一下. Sublime Text 功能使用介绍,目录: Nodejs build System Multiple Selections Project & W

Sublime Text自定义snippet

Sublime Text自定义snippet snippet可以理解为代码片段, 在自定义好snippet后就可以快带生成相应的代码片段 安装sass snippet插件 (支持该功能的插件,sublime 2和3都可以使用该功能) 查看snippet功能是否可用 新建一个html文件,按ctrl+shift+p 后输入snippet,看是否有相应的snippet字段.如果有,则表示snippet可正常使用 查看对应文件的scope snippet功能通过键入关键词后按tab完成代码不全,但是很

sublime自定义snippet代码片段

相信很多人喜欢sublime编辑工具有两个原因:第一sublime很轻巧方便:第二sublime提供很多自定义拓展功能,包括很简单且和很好用的代码片段功能snippet文件. 今天,在这里就介绍下sublime如何自定义各种代码片段,先来感受一下效果: 上面看到的是我用sublime初始化一个html文件的操作gif,相信这是很多人在新项目必经的步骤.而我里面不同的时,不需要任何复制,只需几秒钟就完成整个初始化的工作,这就是sublime的魅力之一:代码片段snippet. 下面我就拿上面的动画

Sublime Text 2中自定义代码模板

Sublime Text 2中自定义代码模板 2012-12-06 10:13 9921人阅读 评论(0) 收藏 举报  分类: 编辑器-Sublime Text 2(5)  版权声明:本文为博主原创文章,未经博主允许不得转载. 选择菜单Preferences->Browse Packages,找到java目录,其中后缀名为sublime-snippet的文件就是代码模板. 尚未完全搞明白这类文件的语法,不过可以比葫芦画瓢. 打开test.sublime-snippet: <snippet&g

sublime text 之snippet功能的使用

sublime text 小巧而功能强大,有着好看的外观,被誉为世界上最“性感”的IDE.sublime text也是本小白在最近的学习和做项目当中最常使用的IDE.小巧且功能强大,对于开发前端以及小型项目来说绰绰有余. 但对于诸多功能,本白也是通过网上的一些大神笔记以及官网上的一些功能才了解并使用到的.最近习得的功能中,其中一个叫snippet的小功能让人觉得很有意思.于是乎,本白决定以此文记录一下使用的过程,以便不时之需. 以下进入正文: 安装sass snippet插件 (支持该功能的插件

sublime text 3 添加 javascript 代码片段 ( snippet )

例如:新建console.log();的快捷键为 co 环境:windows 7 step1: Tools -> New Snippet 1 <snippet> 2 <content><![CDATA[consloe.log(${1:this});]]></content> 3 <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> 4 <tab

Sublime Text自定义插入当前时间的插件

很奇怪为什么强大的Sublime编辑器为什么没有添加当前时间的快捷键,不过还好Sublime可以通过自定义插件的方式来实现任何你想要的效果 1. 创建插件: Tools → New Plugin: 新建文件并 保存为Sublime Text 2\Packages\User\addInfo.py importdatetime importsublime_plugin classAddInfoCommand(sublime_plugin.TextCommand): defrun(self,edit)