En Sublime Text, ¿cómo acorta el código de escritura?

9

Mis disculpas, pero no sé cómo se llama, si esto se ha preguntado o para qué sitio de Stack es el más adecuado. He visto varios videos sobre cómo las personas usan Sublime para crear etiquetas más rápidas y me gustaría aprender la forma correcta de hacerlo si hay alguna documentación o qué puedo hacer más rápido en mi codificación.

En varios videos veo gente haciendo cosas como:

div.classy creará <div class="class"></div>después tab.

sublime-text-2

— DᴀʀᴛʜVᴀᴅᴇʀ
fuente

También puede crear sus propios fragmentos personalizados; docs.sublimetext.info/en/latest/extensibility/snippets.html

— Abdessamad Idrissi

El enlace de arriba ya no es válido. ¿Existe un enlace oficial que indique cómo crear nuestros propios fragmentos personalizados?

— anjanesh

11

La característica que describe es parte de Sublime Text 2 fuera de la caja. Asegúrese de que su documento use la sintaxis HTML ( Ver »Sintaxis» HTML ).

Escriba foo.bar, presione Tab, y obtendrá <foo class="bar"></foo>. También hay foo#bar(para en idlugar de class). Ambos se implementan en .Packages/HTML/html_completions.py

— Daniel Beck
fuente

¿Existe alguna documentación sobre cómo construir aetiquetas y algo así como lietiquetas? ¿Es esto solo para HTML? y +1.

— DᴀʀᴛʜVᴀᴅᴇʀ

@Gramps No estoy seguro de lo que quiere decir, pero tenga en cuenta que señalé el script donde se implementa esta función (seleccione el elemento del menú Examinar paquetes ... para ir al directorio que menciono). Podría, por ejemplo, extender el script existente para admitir, por ejemplo, separadores adicionales. Los scripts de Sublime Text 2 se implementan en Python, aquí está la documentación de Python , y esta página contiene la documentación específica para Sublime Text 2.

— Daniel Beck

¿He visto a alguien hacer div#main.containerpero Sublime escupe un mainelemento con una clase de containercuando lo intento?

— taco

7

Emmet / Codificación Zen

Emmet es un complemento en el que escribe la estructura básica de forma similar a un selector CSS y hace que el editor la expanda. Puede encontrar el paquete en GitHub e instalarlo a través del Administrador de paquetes.

_{(fuente: smashingmagazine.com )}

Esta revista Smashing tiene un artículo sobre ella . Por ejemplo,

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

se expandirá con Taba

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

Ajustar selección en etiquetas

Lo que también puede hacer es presionar AltShiftWpara crear una etiqueta abierta o ajustar la selección actual en una etiqueta (consulte Edición »Etiqueta» Ajustar selección actual en etiqueta ).

Por defecto creará:

<p></p>

con el nombre de etiqueta seleccionado para que pueda sobrescribirlo.

Presionar te Tabllevaría más adentro de la etiqueta. O, si presiona Space, podría crear atributos, por ejemplo:

AltShiftW(en Windows / Linux) o CtrlShiftWen OS X
A
Space
Escribe href="...", entoncesTab
Resultados <a href="..."></a>con el cursor colocado dentro de la etiqueta

— slhck
fuente