The use of the snippet function of the sublime text

Sublime text is small and powerful, with a nice look, known as the world's most "sexy" IDE. Sublime text is also the most commonly used IDE in this small white in recent learning and doing projects. Small and powerful, more than enough for developing front-end and small projects.

But for many functions, this white is also through the online some of the great God notes and some of the functions of the official network to understand and use. One of the most recently learned features is that it's interesting to find a small feature called Snippet. As a matter of course, this white decided to record the use of the process in order to be rainy.

Enter the following text:

• Install the Sass Snippet plugin (plug-ins that support this feature, sublime 2 and 3 can use this feature)

1. Under Windows, press Ctrl+shift+p to open the sublime command line, enter ' PCI ' (the package control:install the abbreviation)
2. Wait a few moments, and wait for the sublime to connect to the network pop-up search box. Then search sass Snippet and click Install.

• See if the snippet feature is available

1. Create a new HTML file, press Ctrl+shift+p and enter snippet to see if there is a corresponding snippet field. If there is, it means that snippet can be used normally.

• View the scope of the corresponding file

1. Snippet function by typing keywords and pressing tab to complete the code is incomplete, but many times we do not need to use the code in other files for different file types, so we need to see some of the files corresponding to the scope
2. Open the code type for which you want to edit the snippet code block to specify completion or type ' ssphp ' (Set syntax:php settings file type PHP) from the command line (CTRL+SHIFT+P). Then press CTRL+SHIFT+ALT+P, and the corresponding scope will be displayed under the editor. For example, PHP files and HTML files corresponding to the scope is ' text.html ', while CSS and JS are source.css and source.js.

• New Snippet and edit snippet

1. Click on the above options to the Tools > Small clips (after Chinese, the English version should be directly snippet)
2. Once clicked, Sublime will create a new file directly with the following content:

<snippet>
<content><! [cdata[
Hello, ${1:this} is a ${2:snippet}. <!--auto-complete code quickly placed in this middle---
]]></content>
<!--Optional:set a tabtrigger to define what to trigger the snippet-
<!--<tabTrigger>hello</tabTrigger>-<!- -Use the comment to remove the middle Word to press TAB to trigger the completion of the keyword--
<!--Optional:set a scope to limit where the snippet would trigger--
<!--<scope>source.python</scope> <!--settings Under what file type trigger completion, fill in the scope--> obtained above
</snippet>

3. In the complement content, the $ symbol represents the position and order in which the cursor appears after the code is not complete. For example ${1:this}: The cursor appears here for the first time, the default value is this, and the default value is selected. If there are more than one, the cursor appears here at the same time, and the default value appears only for the value of the first setting. ${2:snippet} is defined below, so when you have modified $ $ and press TAB, you jump directly to the location of the $. In addition, if you need to display the $ symbol, you need to escape the symbol with ' \ ' in front of it.

4. If there is a conflict between the trigger keyword and the code completion keyword in sublime text, it may cause the snippet to be invalid.

• Preservation of snippet

1. The edited snippet needs to use the suffix specified by the sublime text:. Sublime-snippet.
2. The code is saved under the sublime text installation path: Data > Packages > User directory.
3. It is recommended that you create a new snippet directory in the user directory that specifically stores snippet blocks of code. (does not affect functionality).

• Use of snippet

1. After editing, open a new file of the snippet corresponding file type, type the keyword and press TAB to complete the completion of the code
2. CSS block before the completion of the code, you need to add '. ' Before the keyword or ' # ' and then press TAB. (Here is a little pit.) So when editing the snippet, you can add a $ $ in front of the code block, complete after the symbol can be deleted directly. ）

• Test

If the edited snippet is not valid, you can use the following snippet test, this white-tested:

<snippet>
<content><! [cdata[
<?php
/**
* The following code is used for ${1:index} output
*
* Detailed
* @author Rex<[email protected]>
* @version 1.0
* @since 2015
*/
Claim encoding
Header (' Content-type:text/html;charset=utf-8 ');
Setting the time zone
Date_default_timezone_set (' PRC ');

$




?>
]]></content>
<!--Optional:set a tabtrigger to define what to trigger the snippet-
<tabTrigger>pb</tabTrigger>
<!--Optional:set a scope to limit where the snippet would trigger--
<scope>text.html</scope>
</snippet>

The above snippet are equally valid in both HTML and PHP. If the snippet does not function properly, ctrl+shift+p search for Sass snippet is installed first. Then check to see if the snippet suffix is correct. Overall, this feature is relatively simple and easy to use. There are not many places where problems can be found.

Then, start writing your first paragraph of snippet.

The use of the snippet function of the sublime text