Sublime Text Snippets(代码片段)

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

创建方法:Tools > Developer > 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 </snippet>

如果你有一些困惑,请看下面的解释:

 1 <snippet>
 2     <content><![CDATA[
 3 你需要插入的代码片段${1:name}
 4 ]]></content>
 5     <!-- 可选:快捷键,利用Tab自动补全代码的功能 -->
 6     <tabTrigger>reactclass</tabTrigger>
 7     <!-- 可选:使用范围,不填写代表对所有文件有效。附:source.css和test.html分别对应不同文件。 -->
 8     <scope>source.js</scope>
 9     <!-- 可选:在snippet菜单中的显示说明(支持中文)。如果不定义,菜单则显示当前文件的文件名。 -->
10     <description>My Snippet</description>
11 </snippet>

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

下面是我的一个示例:

 1 <snippet>
 2     <content>
 3         <![CDATA[
 4 import React, {Component} from ‘react‘;
 5
 6 class ${1:ClassName} extends Component {
 7
 8     constructor(props) {
 9         super(props);
10     }
11
12     componentWillMount() {
13
14     }
15
16     componentDidMount() {
17
18     }
19
20     componentWillReceiveProps(nextProps) {
21
22     }
23
24     render() {
25         return (
26
27         );
28     }
29 }
30
31 export default ${2:ClassName}]]>
32     </content>
33     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
34     <tabTrigger>reactclass</tabTrigger>
35     <!-- Optional: Set a scope to limit where the snippet will trigger -->
36     <scope>source.js</scope>
37 </snippet>

创建完毕以后,保存在Sublime Text\Packages\User目录下,文件命名随意,后缀名.sublime-snippet。

这个时候,在js文件中就可以通过reactclass快捷键直接创建ES6语法对应的React Class了,开发效率大大提高了。

时间: 2024-10-24 08:16:54

Sublime Text Snippets(代码片段)的相关文章

Sublime Text 2 代码片断

原文:Snippets 不管是在编码,还是写畅销书,你都可能会需要一遍又一遍的用到一些文本的小片断.使用片断来结束这种单调无聊的码字吧,片断是一种智能的模板,它能在合适的上下文中插入你需要的文本内容. 创建一个新的片断,选择 Tools | New Snippet... Sublime Text 将为你生成一个片断的基本的骨架. 片断可以保存在任何的包文件夹中,但为了简单起见,你可以保存在 Packages/User 文件夹下. 格式 通常的片断存在于某一个 Sublime Text 的包中.它

Sublime Text Snippets(代码片段)功能

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段.这时候就需要反复的复制和黏贴,大大影响效率.我们利用Sublime Text的snippet功能,就能很好的解决这一问题.通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用. 创建方法:Tools > New Snippet 这时你会看到如下示例代码: 1 <snippet> 2 <content><![CDATA[ 3 Hello, ${1:this} is a ${2:snippet}.

sublime自定义snippet代码片段

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

sublime text3 增加代码片段(snipper)

有时候编写代码时有些代码片段经常会用到,如果能将这些代码片段整理,再在需要的时候通过某些条件触发,那无疑是非常方便的! 创建方法:工具->插件开发->新建代码片段 默认产生的内容是: 1 <snippet> 2 <content><![CDATA[ 3 Hello, ${1:this} is a ${2:snippet}. 4 ]]></content> 5 <!-- Optional: Set a tabTrigger to define

神器-Sublime Text 3 代码编辑器安装与使用

一.软件获取 1.软件下载地址:http://www.sublimetext.com/3. 2.注册机和汉化下载:http://files.cnblogs.com/files/1312mn/sublime_text_3.zip. 二.Sublime Text 3 安装 1.下载适合自己机器的版本Sublime Text3软件进行安装,安装完成如下图所示: 2.安装插件管理器(Package Control) 点击菜单栏上的view(查看)——>show console(显示控制台) 菜单,然后在

Sublime Text3自定义代码片段

1.打开工具--插件开发--新建代码片段 会出现下图: 2.在<![CDATA[和]]>内写下你要的代码片段,注意的是代码片段要靠最左边. 3.设置快捷键,把下面tabTrigger标签的注释打开,中间的h就是你的快捷键. 4.Ctrl+s保存.名字随便起,但是后缀名必须是.sublime-snippet 5.新建一个页面index.html,在index中输入一个h,然后按Tab键,就出现你设置的代码片段了. 感兴趣的小伙伴赶快去实践一下吧!

Code Snippets 代码片段

1.Title : 代码片段的标题 2.Summary : 代码片段的描述文字 3.Platform : 可以使用代码片段的平台,有IOS/OS X/All三个选项 4.Language : 可以在哪些语言中使用该代码片段 5.Completion Shortcut : 代码片段的快捷方式,比如本文开头用到的dowhile,在这里,把属性设置的快捷方式设为property 6.Completion Scopes : 可以在哪些文件中使用当前代码片段,比如全部位置,头文件中等,当然可以添加多个支持

Sublime Text 格式化代码快捷键

首选项->按键绑定-用户 加入代码: {"keys": ["ctrl+alt+j"], "command": "reindent"} 保存后关闭当前页,回到html代码   代码全选,Ctrl+Alt+J

Sublime Text 3 代码格式化插件推荐 CodeFormatter

CodeFormatter CodeFormatter has support for the following languages: * PHP - By PHP_Beautifier* JavaScript/JSON - By JSBeautifier* HTML - By JSBeautifier* CSS - By JSBeautifier* Python - By PythonTidy (only ST2) 支持,php,js,html,css 默认快捷键 ctrl+shift+f;