Sublime Text Snippets

Posted 2020-09-14

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

View Code

如果你有一些困惑，请看下面的解释：

 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>

View Code

${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>

View Code

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

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