我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用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