Maison > outils de développement > sublime > Comment générer automatiquement du code dans sublime

Comment générer automatiquement du code dans sublime

下次还敢
Libérer: 2024-04-03 14:57:23
original
797 Les gens l'ont consulté

Comment générer automatiquement du code dans Sublime Text : Installez le gestionnaire de packages Emmet. Activez Emmet et enregistrez le fichier de paramètres. Utilisez le raccourci Emmet pour générer automatiquement du code : tapez le nom de l'élément + Tab pour développer l'élément. Utilisez des éléments parents pour envelopper des éléments enfants afin de créer des éléments imbriqués. L'ajout d'une paire d'attributs après le nom d'un élément génère un élément attribué.

Comment générer automatiquement du code dans sublime

Comment générer automatiquement du code dans Sublime Text

Sublime Text est un éditeur de code populaire qui fournit une série de fonctionnalités pour améliorer l'efficacité du développement, y compris la génération automatique de code.

Méthode :

  1. Installer le gestionnaire de paquets Emmet :

    • Dans Sublime Text, utilisez les touches de raccourci Ctrl + Shift + P (Windows) ou Cmd + Shift + P (Mac) pour ouvrir la palette de commandes. 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>
      Copier après la connexion
    • 保存设置文件。
  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>
  • Entrez Package Control : Install Package et appuyez sur Entrée.

Entrez Emmet dans la barre de recherche, recherchez le package concerné et installez-le.

🎜🎜🎜🎜🎜Activer Emmet : 🎜🎜🎜🎜Ouvrez le fichier de préférences de Sublime Text : Préférences > 🎜🎜🎜Ajoutez la ligne suivante : 🎜rrreee🎜🎜Enregistrez le fichier de paramètres. 🎜🎜🎜🎜🎜🎜Utilisez le raccourci Emmet : 🎜🎜🎜🎜Pour générer automatiquement un élément HTML, saisissez le nom de l'élément et appuyez sur la touche Tab. Par exemple, en tapant div et en appuyant sur Tab, vous obtiendrez <div></div>. 🎜🎜Pour générer des éléments imbriqués, enveloppez les éléments enfants avec les éléments parents. Par exemple, en tapant div>ul et en appuyant sur Tab, vous obtiendrez <div><ul></ul></div> code >. 🎜🎜Pour générer un élément avec des attributs, ajoutez une paire d'attributs après le nom de l'élément. Par exemple, en tapant div[id=container] et en appuyant sur Tab, vous obtiendrez <div id="container"></div> code >. 🎜🎜🎜🎜🎜Exemples : 🎜🎜🎜Voici quelques exemples d'utilisation d'Emmet pour générer automatiquement du code : 🎜🎜🎜Entrez ! et appuyez sur Tab et il s'étendra au document HTML5. 🎜🎜Entrez nav#main et appuyez sur Tab pour développer jusqu'à <nav id="main"></nav>. 🎜🎜Entrez ul>li*5 et appuyez sur Tab, il se développera en <ul><li></li><li> < /li><li></li><li></li><li></li></ul>. 🎜🎜🎜Emmet propose une large gamme de raccourcis pour générer différents éléments, attributs et structures. Consultez la documentation Emmet pour une liste complète. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal