I believe many people like sublime editing tools for two reasons: first, sublime is lightweight and convenient; second, sublime provides many custom extensions, including simple and easy-to-use snippet files with code snippets.
Today, we will introduce how sublime Can Customize various code snippets. First, let's take a look at the effect:
The above shows how to use sublime to initialize an HTML file operation GIF. I believe this is a necessary step for many people in the new project. In my case, there is no need for any replication, and it takes only a few seconds to complete the initialization. This is one of the charm of sublime: code snippet.
Next I will take the two initialization methods used in the above Animation: HTML initialization and CSS reset initialization to introduce how to create your own code snippets.
First: HTML initialization code snippet:
Open sublime, find the preferences> browser packages browsing package in the toolbar on the top, and find the packages \ user folder. Generally, custom items are stored in the user folder, you can directly copy this folder to the new installation environment without reconfiguration.
Then create an snippet file under the user. It is best to classify and create the corresponding folder. For example, you can create an HTML folder by using HTML code snippets, and so on by using CSS.
The snippet language is easy to use. It has four parameters: content, tabtrigger, description, and scope.
| 1234567891011121314 | <snippet> <content><![CDATA[ // The expanded code ]]></content> <tabTrigger>xxxxxx</tabTrigger> // Abbreviation of quick Input <description>xxxxxxx</description> // Fragment description <scope>xxxxxxx</scope> // Only valid for HTML files </snippet> |
For example, you need to create an HTML code segment for initialization in HTML5 format:
| 12345678910111213141516171819202122 | <snippet><content><![CDATA[ <!DOCTYPE html> |
Enter the automatically generated code in the content. tabtrigger is the abbreviation name that represents the Code and is simplified. Press the tab key to generate the code. Description is a prompt followed by the abbreviated name. It tells you what the code is. Scope indicates the file type under which the automatic code snippet will take effect. The token format takes effect. And csstest source.css.
Second: CSS initialization code snippet
The operation process and HTML are similar. You can create a new snippetfile and enter the corresponding code. Then scopemust be written as source.css.
| 1234567891011121314151617181920 | <snippet><content><![CDATA[html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}ul,li,div,p,body{margin:0;padding:0;text-align:left;}input{-webkit-appearance:button;}li{list-style:none;}a{text-decoration:none;}img{vertical-align:top;}i,em{font-style:normal;}.hide{display:none;}body, html {background:#fcf8ed;text-align: left;height: 100%;width: 100%;font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;font-size:62.5%;font-weight: normal;}*{-webkit-tap-highlight-color:rgba(14,159,111,0.5);-webkit-touch-callout:none;}#main{margin:0 auto;overflow:hidden;}@media only screen and (min-width:1025px){#main{max-width:320px}}]]></content><tabTrigger>re</tabTrigger><scope>source.css</scope></snippet> |
After reading the above, I have learned to customize code snippets. However, you may have another question: The score parameter is test again, and some are source. How do we know what it is. When you need to customize code snippets, open the packages file. You can see the files in various formats: HTML/CSS/PHP ...., find the format you want to define and check whether there is any snippet file in it. Generally, you can open the snippet file and check the example to see how to write the score parameter.
For example, for PHP, the score is source. php.
Sublime custom snippet code snippet
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
