Dans Sublime Text, comment raccourcir l'écriture de code?

9

Mes excuses mais je ne sais pas comment cela s'appelle, si cela a été demandé ou pour quel site Stack cela convient le mieux. J'ai vu plusieurs vidéos sur la façon dont les gens utilisent Sublime pour créer des balises plus rapidement et j'aimerais apprendre la bonne façon de le faire s'il existe de la documentation ou ce que je peux faire plus rapidement dans mon codage.

Dans plusieurs vidéos, je vois des gens faire des choses comme:

div.classet cela créera <div class="class"></div>après tab.

sublime-text-2 DᴀʀᴛʜVᴀᴅᴇʀ
la source
Vous pouvez également créer vos propres extraits personnalisés; docs.sublimetext.info/en/latest/extensibility/snippets.html
Abdessamad Idrissi
Le lien ci-dessus n'est plus valide. Existe-t-il un lien officiel indiquant comment créer nos propres extraits personnalisés?
anjanesh

Réponses:

11

La fonctionnalité que vous décrivez fait partie de Sublime Text 2 prête à l'emploi. Assurez-vous que votre document utilise la syntaxe HTML ( Affichage »Syntaxe» HTML ).

Tapez foo.bar, appuyez sur Tabet vous obtiendrez <foo class="bar"></foo>. Il y a aussi foo#bar(pour idau lieu de class). Les deux sont implémentés dans .Packages/HTML/html_completions.py

Daniel Beck
la source
Existe-t-il une documentation sur la façon de créer des abalises et quelque chose comme des libalises? Est-ce uniquement pour HTML? et +1.
DᴀʀᴛʜVᴀᴅᴇʀ
@Gramps Je ne sais pas ce que vous voulez dire, mais notez que j'ai indiqué le script où cette fonctionnalité est implémentée (sélectionnez l' élément de menu Parcourir les packages… pour accéder au répertoire que je mentionne). Vous pouvez, par exemple, étendre le script existant pour prendre en charge, par exemple, des séparateurs supplémentaires. Les scripts Sublime Text 2 sont implémentés en Python, voici la documentation Python , et cette page contient la documentation spécifique à Sublime Text 2.
Daniel Beck
J'ai vu quelqu'un faire div#main.containermais Sublime crache un mainélément avec une classe containerquand j'essaye?
taco
7

Emmet / Zen-Coding

Emmet est un plugin où vous écrivez la structure de base à la manière d'un sélecteur CSS et que l'éditeur la développe. Vous pouvez trouver le package sur GitHub et l'installer via le gestionnaire de packages.


(source: smashingmagazine.com )

Ce Smashing Magazine a un article dessus . Par exemple,

(.foo>h1)+(.bar>h2)

va se développer avec Tabla

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Envelopper la sélection dans les balises

Vous pouvez également appuyer sur AltShiftWpour créer une balise ouverte ou pour envelopper la sélection actuelle dans une balise (voir Édition »Balise» Envelopper la sélection actuelle dans la balise ).

Par défaut, cela créera:

<p></p>

avec le nom de la balise sélectionné afin que vous puissiez l'écraser.

En appuyant sur Tabvous obtiendrez davantage à l'intérieur de la balise. Ou, si vous appuyez sur Space, vous pouvez créer des attributs, par exemple:

  • AltShiftW(sous Windows / Linux) ou CtrlShiftWsous OS X
  • A
  • Space
  • Tapez href="...", puisTab
  • Résultats <a href="..."></a>avec le curseur positionné à l'intérieur de la balise
slhck
la source