Home > Article > Development Tools > How to add code snippets in Sublime Text

How to add code snippets in Sublime Text

藏色散人forward: 2019-09-30 15:02:143215browse

The following column sublime usage tutorial will introduce you to the method of adding code snippets in Sublime Text. I hope it will be helpful to friends in need!

#When we write code, we will always encounter some code snippets that need to be used repeatedly. At this time, repeated copying and pasting is required, which greatly affects efficiency. We can solve this problem well by using the snippet (code snippet) function of Sublime Text.

In layman's terms, it means to save our commonly used codes separately, and then call them repeatedly through plug-ins.

Creation method: Tools > New Snippet

At this time, the following code will appear:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></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> -->
    <!-- <description>description</description> -->
</snippet>

The content is wrapped by CDATA The part is the code snippet we want to insert, optional.

tabTrigger is the name of the automatic code completion function triggered by our tab key, optional.

scope, optional, using scope, leaving it blank means it is valid for all files. Attachment: source.css and test.html correspond to different files respectively.

description, optional, the description displayed in the snippet menu (supports Chinese). If not defined, the menu displays the file name of the current file.

${1:this} indicates the position where the cursor stays after the code is inserted. Multiple insertions can be made at the same time. Among them: this is a custom parameter (optional).

${2} means that after the code is inserted, press the Tab key, and the cursor will jump to the corresponding position according to the order (and so on).

Now, you should have a general understanding. Then let's start writing an example ourselves. We all know that in Sublime, enter! Or html:5 and then press the tab key to automatically complete the HTML structure, but the result is relatively simple. I expanded its result content myself, added several mate tags, and added a page description.

<snippet>
    <content><![CDATA[
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="Generator" content="Sublime Text3">
    <meta name="Author" content="dunizb">
    <meta name="website" content="http://www.mybry.com">
    <meta name="Description" content="读你，这世间唯有梦想和好姑娘不可辜负~~">
    <link type="image/x-icon" rel="shortcut icon" href="image/favicon.ico" />
    <script type="text/javascript">
        ${1:}
    </script>
<body>
    ${2:这是html内容}
</body>
</html>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>hjs</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
    <description>custom-html</description>
</snippet>

Then save the code snippet, save it under Sublime Text3DataPackagesUser, and give it a name

How to add code snippets in Sublime Text

In this way, enter hjs tab in the HTML page, and it will automatically Complete this series of codes.

The above is the detailed content of How to add code snippets in Sublime Text. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Sublime sets its own shortcut keysNext article：Sublime sets its own shortcut keys

See more

How to add code snippets in Sublime Text

Related articles