Heim > Entwicklungswerkzeuge > sublime > So generieren Sie automatisch Code in Sublime

So generieren Sie automatisch Code in Sublime

下次还敢
Freigeben: 2024-04-03 14:57:23
Original
774 Leute haben es durchsucht

So generieren Sie automatisch Code in Sublime Text: Installieren Sie den Emmet-Paketmanager. Aktivieren Sie Emmet und speichern Sie die Einstellungsdatei. Verwenden Sie die Emmet-Verknüpfung, um automatisch Code zu generieren: Geben Sie den Elementnamen + Tab ein, um das Element zu erweitern. Verwenden Sie übergeordnete Elemente, um untergeordnete Elemente zu umschließen und verschachtelte Elemente zu erstellen. Durch das Hinzufügen eines Attributpaars nach einem Elementnamen wird ein attributiertes Element generiert.

So generieren Sie automatisch Code in Sublime

So generieren Sie automatisch Code in Sublime Text

Sublime Text ist ein beliebter Code-Editor, der eine Reihe von Funktionen zur Verbesserung der Entwicklungseffizienz bietet, einschließlich der automatischen Codegenerierung.

Methode:

  1. Emmet-Paketmanager installieren:

    • Verwenden Sie in Sublime Text die Tastenkombinationen Strg + Umschalt + P (Windows) oder Cmd + Shift + P (Mac), um die Befehlspalette zu öffnen. Ctrl + Shift + P(Windows)或 Cmd + Shift + P(Mac),打开命令面板。
    • 输入 Package Control: Install Package 并回车。
    • 在搜索栏中输入 Emmet,找到相关包并安装。
  2. 启用 Emmet:

    • 打开 Sublime Text 的首选项文件:首选项 > 设置
    • 添加以下行:

      <code>{
        "auto_close_tags": true,
        "auto_complete_triggers": [
          {
            "selector": "*",
            "characters": [
              " ",
              ">",
            ]
          }
        ]
      }</code>
      Nach dem Login kopieren
    • 保存设置文件。
  3. 使用 Emmet 快捷方式:

    • 要自动生成 HTML 元素,请键入元素名称,然后按 Tab 键。例如,输入 div 并按 Tab 会展开为 <div></div>
    • 要生成嵌套元素,请使用父级元素包裹子级元素。例如,输入 div>ul 并按 Tab 会展开为 <div><ul></ul></div>
    • 要生成具有属性的元素,请在元素名称后添加属性对。例如,输入 div[id=container] 并按 Tab 会展开为 <div id="container"></div>

示例:

以下是使用 Emmet 自动生成代码的一些示例:

  • 输入 ! 并按 Tab 会展开为 HTML5 文档。
  • 输入 nav#main 并按 Tab 会展开为 <nav id="main"></nav>
  • 输入 ul>li*5 并按 Tab 会展开为 <ul><li></li><li></li><li></li><li></li><li></li></ul>
  • Geben Sie Package Control: Install Package ein und drücken Sie die Eingabetaste.

Geben Sie Emmet in die Suchleiste ein, suchen Sie das entsprechende Paket und installieren Sie es.

🎜🎜🎜🎜🎜Emmet aktivieren: 🎜🎜🎜🎜Voreinstellungsdatei von Sublime Text öffnen: Einstellungen > 🎜🎜🎜Fügen Sie die folgende Zeile hinzu: 🎜rrreee🎜🎜Speichern Sie die Einstellungsdatei. 🎜🎜🎜🎜🎜🎜Verwenden Sie die Emmet-Verknüpfung: 🎜🎜🎜🎜Um automatisch ein HTML-Element zu generieren, geben Sie den Elementnamen ein und drücken Sie die Tab-Taste. Wenn Sie beispielsweise div eingeben und Tab drücken, wird <div></div> erweitert. 🎜🎜Um verschachtelte Elemente zu generieren, umschließen Sie untergeordnete Elemente mit übergeordneten Elementen. Wenn Sie beispielsweise div>ul eingeben und Tab drücken, wird zu <div><ul></ul></div> erweitert. Code >. 🎜🎜Um ein Element mit Attributen zu generieren, fügen Sie nach dem Elementnamen ein Attributpaar hinzu. Wenn Sie beispielsweise div[id=container] eingeben und Tab drücken, wird die Erweiterung zu <div id="container"></div> Code >. 🎜🎜🎜🎜🎜Beispiele: 🎜🎜🎜Hier sind einige Beispiele für die Verwendung von Emmet zum automatischen Generieren von Code: 🎜🎜🎜Geben Sie ! ein und drücken Sie Tab und es wird zu einem HTML5-Dokument erweitert. 🎜🎜Geben Sie nav#main ein und drücken Sie Tab, um zu <nav id="main"></nav> zu erweitern. 🎜🎜Geben Sie ul>li*5 ein und drücken Sie Tab. Es wird zu <ul><li></li><li> erweitert. < /li><li></li><li></li><li></li></ul>. 🎜🎜🎜Emmet bietet eine Vielzahl von Verknüpfungen zum Generieren verschiedener Elemente, Attribute und Strukturen. Eine vollständige Liste finden Sie in der Emmet-Dokumentation. 🎜

Das obige ist der detaillierte Inhalt vonSo generieren Sie automatisch Code in Sublime. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage