Home Development Tools sublime How to add code snippets in Sublime Text

How to add code snippets in Sublime Text

Sep 30, 2019 pm 03:02 PM
sublime

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1663
14
PHP Tutorial
1266
29
C# Tutorial
1238
24
What should I use to open html? What should I use to open html? Apr 21, 2024 am 11:33 AM

To open HTML files you need to use a browser such as Google Chrome or Mozilla Firefox. To open an HTML file using a browser, follow these steps: 1. Open your browser. 2. Drag and drop the HTML file into the browser window, or click the File menu and select Open.

What software is good for python programming? What software is good for python programming? Apr 20, 2024 pm 08:11 PM

IDLE and Jupyter Notebook are recommended for beginners, and PyCharm, Visual Studio Code and Sublime Text are recommended for intermediate/advanced students. Cloud IDEs Google Colab and Binder provide interactive Python environments. Other recommendations include Anaconda Navigator, Spyder, and Wing IDE. Selection criteria include skill level, project size and personal preference.

How to open local file in html How to open local file in html Apr 22, 2024 am 09:39 AM

HTML can be used to open local files as follows: Create a .html file and import the jQuery library. Create an input field that allows the user to select a file. Listen to the file selection event and use a FileReader() object to read the file contents. Display the read file contents on the web page.

How to use the copied code in python How to use the copied code in python Apr 20, 2024 pm 06:26 PM

Here are the steps to use copied code in Python: Copy and paste the code into a text editor. Create a Python file. Run the code from the command line. Understand what the code is for and how it works. Modify the code as needed and rerun it.

What can I use to open html? What can I use to open html? Apr 21, 2024 am 11:36 AM

HTML files can be opened using a browser (such as Chrome, Firefox, Edge, Safari, Opera): find the HTML file (.html or .htm extension); right-click/long-press on the file; select "Open"; select the file you want to use browser.

How to create py file in python How to create py file in python May 05, 2024 pm 07:57 PM

Steps to create a .py file in Python: Open a text editor (such as Notepad, TextMate, or Sublime Text). Create a new file and enter the Python code, paying attention to indentation and syntax. When saving the file, use a .py extension (for example, my_script.py).

Which html editor software is easy to use? Which html editor software is easy to use? Apr 17, 2024 am 04:54 AM

To sum up, the following HTML editors are highly praised: Visual Studio Code: Cross-platform, feature-rich, free and open source. Sublime Text: High performance, highly customizable, paid software. Atom: cross-platform, scalable, open source and free. Brackets: dedicated for front-end development, intuitive interface, open source and free. Notepad++: lightweight, fast, powerful, open source and free. When choosing an HTML editor, consider factors such as platform compatibility, functionality, extensibility, price, and user-friendliness.

Create and open HTML empty documents Create and open HTML empty documents Apr 09, 2024 pm 12:06 PM

Create an HTML document: Use a text editor to enter the HTML structure and save it as an .html file. Open an HTML document: Double-click the file or use the File > Open option in your browser. Practical case: Create a new HTML file, add a title, style sheet and content, and save it as an .html file.

See all articles