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!
Sublime Text vs. VS Code: Features and FunctionalityMay 11, 2025 am 12:20 AMSublimeText is suitable for developers who pursue speed and simplicity, while VSCode is suitable for users who need strong scalability and integration capabilities. 1.SublimeText is known for its lightweight and fast response, with GotoAnything and multi-select powerful. 2. VSCode is known for its scalability and IDE functions, with built-in Git and debugging tools, and IntelliSense improves development efficiency.
Sublime Text: The Power of Plugins and PackagesMay 10, 2025 am 12:17 AMSublimeText's plug-ins and packages can be installed and managed through PackageControl to improve programming efficiency. 1. Install plug-ins such as BracketHighlighter to simplify code reading by highlighting bracket matching. 2. Use SublimeLinter to configure pylint to implement real-time code checking. 3. Use SideBarEnhancements to customize the sidebar function to optimize file management.
Is Sublime Text Free? Understanding the LicensingMay 09, 2025 am 12:10 AMSublimeTextisfreeduringanunlimitedtrial,buta$99licenseisrecommendedforregularuse.1)Thetrialallowsfullfeatureaccesswithouttimelimits.2)Alicenseoffersperpetualuse,futureupdates,andremovespurchasereminders,enhancingproductivityandsupportingdevelopers.
Sublime Text: Enhancing Your Coding WorkflowMay 08, 2025 am 12:19 AMSublimeText can greatly improve work efficiency. 1) Multiple selection and multicursor functions allow editing of multiple positions at the same time, 2) Command panel provides fast function access, 3) Macros and fragments can automate common operations, 4) Optimized configuration and shortcut key use can improve performance and efficiency.
Sublime Text: Free to Try, Not Necessarily Free to OwnMay 07, 2025 am 12:02 AMSublimeText offers a free trial, but ultimately requires a paid purchase for a permanent authorization. 1) During the free trial period, users can experience its functions, but they will receive a purchase prompt. 2) After purchase, users can use it permanently, no subscription fee, and access more plug-ins and themes.
Sublime Text: Comparing Paid and Unpaid FeaturesMay 06, 2025 am 12:07 AMThemaindifferencesbetweenthepaidandunpaidversionsofSublimeTextaretheremovalofstatusbarremindersandoccasionalpop-uppromptsinthepaidversion.1)Unregisteredversion:fullyfunctionalwithallcorefeatureslikesyntaxhighlighting,codecompletion,andcommandpalette,
Sublime Text: The Cost of a Powerful EditorMay 05, 2025 am 12:04 AMSublimeText is worth buying. 1) Its simple interface and powerful functions, such as multi-line editing and GotoAnything, improve development efficiency. 2) Rich plug-in ecosystem, such as Anaconda, enhances the development experience. 3) Although the price is $70, its performance and fluency are great value for professional developers.
Sublime Text: Code Completion, Syntax Highlighting, and MoreMay 04, 2025 am 12:04 AMSublimeText is loved by developers for its powerful code completion and syntax highlighting capabilities. 1) Code completion can automatically prompt function names, variable names, etc. to improve programming efficiency. 2) Syntax highlighting distinguishes code elements through different colors to improve readability and error detection speed.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SublimeText3 Chinese version
Chinese version, very easy to use
