Sublime 3 new code snippet

The purpose of creating a new code snippet is to quickly implement custom code, thereby improving development efficiency.

1. Click Tools in the sublime menu bar -> Plug-in Development -> New Code Snippet option

Write picture description here

2. The following is the template of the generated code snippet, we need to use the template to customize the code snippet we want

Write picture description here

In the template of the generated code snippet

①The <snippet> </snippet>label represents the code fragment;

②The <content></content>label indicates which code fragments to customize (that is, to store the code fragments you want to customize);

③Indicating ${1:this}the position where the cursor stays for the first time after the code is inserted, multiple inserts can be made at the same time, this is a custom parameter;

④ ${2:snippet}After the code is inserted, press the Tab key, the cursor will jump to the corresponding position according to the order of the first time (that is, the cursor will jump to the second position after pressing the Tab key);

⑤The <tabTrigger>hello</tabTrigger>content in the label is the name we gave to the code fragment (that is, when we define the code fragment, we can find our custom code fragment by this name), of course, we need to open the comment of this label .

⑥ Other codes can be ignored; ((#^.^#), let me be lazy!)

<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>

Note: <content><![CDATA[ ]]></content> Do not delete this format, it needs to store our custom code snippets.

3. For example, we want to customize the following code snippets (that is, the structure we want to quickly generate)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src=""></script>
<body>

</body>
</html>

4. Then paste the customized code snippet into the code snippet template, as shown in the figure below

Write picture description here

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src=""></script>
<body>

</body>
</html>

]]></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>

5. Be anxious! It's almost done soon! I'm afraid you can't help but look down! (What? You can keep looking down, then okay, you won! I continue to go down the codeword, it is almost early in the morning, and I will sleep when I finish writing.)

Write picture description here

As follows

<snippet>
    <content><![CDATA[

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${1:Document}</title>
</head>
<script src="${2:}"></script>
<body>
    ${3:}
</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.python</scope> -->
</snippet>

6. At this time, we define the code segment ctrl+s to save it

Write picture description here

7. Then give this snippet from the name, then click Save

Write picture description here

8. Create a new html file

Write picture description here

9. Then select html5, and you're done! ! (Wash and sleep, (¦3[▓▓] Good night!)

Write picture description here

Author: Cai Guoqing (Xiao Zhu)