How to add code snippets in Sublime Text-sublime-php.cn

How to add code snippets in Sublime Text

藏色散人

Release： 2019-09-30 15:03:41

forward

3343 people have browsed it

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!

How to add code snippets in Sublime Text

#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>

Copy after login

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>

Copy after login

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!