Home > Article > Development Tools > Create custom code snippets in sublime
Create custom code snippets in sublime
- 藏色散人forward
- 2019-10-09 13:58:513055browse
In sublime-text, if the file type is HTML, when input! or html:5, then type the Tab key to generate the default basic skeleton code snippet. We can also modify some of our commonly used custom code snippets on the basic skeleton. After saving, when we need to use it next time, we can use the specified shortcut keys to quickly generate it.
The following column sublime introductory tutorial will introduce you to the steps to create a custom code segment in sublime.
#1. Generate the basic skeleton
After opening sublime, create a new file and make sure to change the file type in the lower right corner from the default Plain Text is changed to HTML. Then use ! or html:5 with the Tab key to quickly generate the default basic skeleton code segment.
#2. Edit the custom code segment
Used in the entry function of jquery Keyword $, since $ is a grammatical keyword of the code segment, if "$" is used directly in the custom code segment, a syntax error will occur, resulting in the failure to generate the code segment. You can optionally use "$" instead of "$" in the code snippet. Later, when using shortcut keys to generate code snippets, the "\" escape symbol will not appear.
3. Set parameters and save the custom code snippet
Select and click Tools->Developer->New Snippet in the menu bar. At this time, a new interface in XML format will be generated, as shown below.
Hello, ${1:this} is a ${2:snippet}.This part is just to prompt us to set and control the syntax of the cursor position in the code segment. After taking note, you can delete this line of code and copy and paste the custom code snippet we just edited. (As shown in the figure below, insert at the position of line 3).
We can control the cursor lift position in the generated code segment according to the syntax previously prompted, which is more convenient for subsequent editing.
If we modify the original code segment to:
<title>${1:01}-jquery案例-${2:}</title>
<body> ${3:} </body>means that after the code segment is created and quickly generated using shortcut keys, the mark first appears in front of 01, and the field 01 is selected for easy modification and editing. Then press the Tab key again, and the cursor will appear after jquery-. There is no content selected here, making it easier to insert content. Press the Tab key again, and the cursor will appear in the body tag pair, which is also convenient for inserting content.
Afterwards, uncomment , and enter the name of the custom shortcut command in the tag pair. As follows.
means that after we enter myjquery in the newly created HTML file, and then type Tab, we can quickly generate our customized code snippet.
After completing editing, save it. Directly use ctri s to save it to Packages->User in the sublime installation directory by default. In order to facilitate the management of our custom code snippets, create a new snippets folder and save all custom code snippet files into this folder.
The file name can be customized, but the suffix must be .sublime-snippet, otherwise an error will occur.
This completes the creation of the custom code snippet. Next, create a new HTML file in sublime, enter myjquery, and use the Tab key to quickly generate the specified custom code snippet!
The above is the detailed content of Create custom code snippets in sublime. For more information, please follow other related articles on the PHP Chinese website!