Home > Development Tools > sublime > How to automatically generate code in sublime

How to automatically generate code in sublime

下次还敢
Release: 2024-04-03 14:57:23
Original
798 people have browsed it

How to automatically generate code in Sublime Text: Install the Emmet package manager. Enable Emmet and save the settings file. Use the Emmet shortcut to automatically generate code: Type the element name and Tab to expand the element. Use parent elements to wrap child elements to create nested elements. Adding an attribute pair after an element name produces an attributed element.

How to automatically generate code in sublime

How to automatically generate code in Sublime Text

Sublime Text is a popular code editor that provides It provides a series of features to improve development efficiency, including automatic code generation.

Method:

  1. Install Emmet Package Manager:

    • In Sublime Text , use the shortcut keys Ctrl Shift P (Windows) or Cmd Shift P (Mac), open the command panel.
    • Enter Package Control: Install Package and press Enter.
    • Enter Emmet in the search bar, find the relevant package and install it.
  2. Enable Emmet:

    • Open the Sublime Text preference file: Preferences > ; set up .
    • Add the following lines:

      <code>{
        "auto_close_tags": true,
        "auto_complete_triggers": [
          {
            "selector": "*",
            "characters": [
              " ",
              ">",
            ]
          }
        ]
      }</code>
      Copy after login
    • Save the settings file.
  3. Use the Emmet shortcut:

    • To automatically generate an HTML element, type the element name and press Tab key. For example, typing div and pressing Tab will expand to <div></div>.
    • To generate nested elements, wrap child elements with parent elements. For example, typing div>ul and pressing Tab will expand to <div><ul></ul></div>.
    • To generate an element with attributes, add an attribute pair after the element name. For example, typing div[id=container] and pressing Tab will expand to <div id="container"></div>.

Example:

Here are some examples of using Emmet to automatically generate code:

  • Enter ! and pressing Tab will expand to an HTML5 document.
  • Enter nav#main and press Tab, it will expand to <nav id="main"></nav>.
  • Enter ul>li*5 and press Tab, it will expand to <ul><li></li><li> </li><li></li><li></li><li></li></ul>.

Emmet provides a wide range of shortcuts for generating different elements, attributes and structures. See the Emmet documentation for a complete list.

The above is the detailed content of How to automatically generate code in sublime. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template