Aprende a ser un campeón de TextMate

TextMate es, de lejos, el editor de texto preferido para la mayoría de los desarrolladores web en Mac. En el screencast de hoy, echaremos un vistazo a algunas de las características que la mayoría de los desarrolladores simplemente no usan, lo que puede aumentar enormemente su productividad al permitirle escribir menos.!

¿No eres una persona Mac? Jeffrey tiene un screencast titulado "Cómo puedo codificar dos veces tan rápido como tú" que muestra cómo realizar acciones similares con una aplicación de "expansión de texto" en Windows.


Screencast completo



Accesos directos utilizados

Puede ver todos los accesos directos y funciones de TextMate en el menú 'Paquetes'. Éstos son algunos de los que uso regularmente:

Llave

Lengüeta
Cambio
Controlar
Opción (Alt)
Mando
Escapar (esc)
Regreso
↓ ← ↑ → Teclas de flecha del teclado
                                      

HTML

Atajo Acción
⌃ ⇧ , Nuevo par de etiquetas HTML
⌥ ⎋ Completar automáticamente la etiqueta / atributo
⌘ ⇧ 7 Convertir la selección a entidades HTML
! ⇥ Condicionales de Internet Explorer
⇧ ↩ Salto de línea
⌃ ⇧ V Validar HTML / CSS
enlace ⇥ Etiqueta de enlace de hoja de estilo
estilo ⇥ Bloque de estilo en linea
scriptsrc ⇥ Etiqueta externa de JavaScript
guión ⇥ Bloque de JavaScript en línea
                                      

PHP

Atajo Acción
php ⇥
eco ⇥
si ⇥

si no ⇥

para ⇥
por cada ⇥
mientras que ⇥
matriz ⇥
cambiar ⇥
caso ⇥
Como es de esperar.
req ⇥
req1 ⇥
incl ⇥
incl1 ⇥
requiere 'archivo';
require_once 'archivo';
incluir 'archivo';
include_once 'archivo';
$ _ ⇥ Seleccione $ _ ['POST'], $ _ ['GET'] etc. (Arreglos globales)
⌃ ⇧ V Validar sintaxis
⌘ ⇧ R Ejecutar archivo PHP
                                      

Rubí

Atajo Acción
si ⇥
ife ⇥ (if, elsif)
a menos que
mientras que ⇥
Como es de esperar.
req ⇥ exigir ""
reqg ⇥ requieren "rubygems"
exigir ""
Hash ⇥ Hash.new | hash, clave | hash [clave] =
: ⇥ : clave => "valor",
Archivo ⇥ Seleccione para diferentes métodos de objeto 'Archivo' (lectura, escritura, etc.)
⌘ R Ejecutar archivo Ruby
                                      

Carriles

Atajo Acción
cla ⇥ Crear un controlador de rieles
flash ⇥ flash [: notice] = "
ra ⇥ render: action => "
vp ⇥ validates_presence_of: input
vl ⇥ validates_length_of: input,: within => 1… 12
⌃ P params [: objeto]
⌃ J sesion [: objeto]
⌃ ⇧ . <%= %>
ff ⇥ <% form_for @model do |f| -%>

<% end -%>

F. ⇥ Seleccione para el asistente de formularios de Rails: etiqueta, campo, contraseña, área de texto, casilla de verificación, etc..
slt ⇥ <%= stylesheet_link_tag"%>
jit <%= javascript_include_tag"%>
⌥ ⌘ ↓ Ir al controlador apropiado, modelo, vista, etc. para el archivo actual
mcol ⇥ Uso en migraciones. Seleccione para agregar, editar, renombrar, eliminar columnas, etc..
                                      

Crea tu propio acceso directo / tecla de acceso directo

Vamos a crear un acceso directo (al que se accede con ⌘⇧A) para envolver el texto actualmente seleccionado en un enlace, y saltarle directamente al atributo para ingresar la URL.

En TextMate, vaya a "Bundles> Bundle Editor> Show Bundle Editor" (o presione ⌃⌥⌘B). Así es como se ve mi editor. El tuyo puede verse diferente, ya que he agregado algunos paquetes personalizados y algunos para los idiomas que no uso:


Haga clic en el menú desplegable HTML (paquete), haga clic en + en la parte inferior izquierda de la ventana y seleccione 'Nuevo fragmento'. Asigne un nombre a este fragmento 'Wrap Link' para la 'Activación', seleccione 'Equivalente de clave' y en el cuadro ingrese la combinación de teclas que desea usar (por ejemplo, ⌘⇧A).


Dentro del área de texto ingrese:

 $ TM_SELECTED_TEXT

$ TM_SELECTED_TEXT Es una variable que contiene el texto seleccionado. Cierra la ventana y pruébala. Abra un documento en TextMate, resalte un texto y presione su combinación de teclas. La selección será envuelta en etiquetas de anclaje..

Sin embargo, como está ahora, todavía tiene que mover el cursor hacia la href = "" atributo para entrar en el enlace real. ¿No sería más fácil si nuestro cursor se moviera allí automáticamente??

Cambie el comando 'Wrap Link' a lo siguiente:

 $ TM_SELECTED_TEXT

los $ 1 le dice a TextMate dónde colocar el cursor después de realizar la tarea. Puedes colocar $ 2, $ 3 etc. y luego muévete por ellos usando la tecla de tabulación.

Finalmente, cambie el comando a:

 $ 2: $ TM_SELECTED_TEXT

Puede agregar texto predeterminado en una ubicación usando $ 2: Texto predeterminado. Se mostrará el 'Texto predeterminado', y se resaltará automáticamente cuando se tabule en él..
En nuestro caso, hemos establecido el texto seleccionado como una ubicación de pestaña para las circunstancias en las que es posible que desee cambiar el texto original..

También podría "reflejar" el texto ingresado en los puntos de tabulación, de esta manera:

 

Texto: $ 1

Algún otro texto: $ 2: blah de blah de blah

Espejo de 1: $ 1

Independientemente de lo que ingrese en la primera pestaña, se ingresará automáticamente en otras posiciones que tienen el mismo valor.


Otros ejemplos:

Personalmente, he creado mis propios paquetes para incluir las bibliotecas jQuery, ingresar el texto 'Lorem Ipsum' y también para escribir artículos de Nettuts. Por ejemplo:

Fragmentos de jQuery

¿Te encuentras usando etiquetas jQuery sin pensar? Prueba estos:
'jQuery CDN' accedido con inc-jquery disparador de pestañas:

 

'jQuery UI CDN' accedido con inc-ui disparador de pestañas:

 

'jQuery Inline Script' accedido con inline-jquery disparador de pestañas:

 

Se accede a 'jQuery Document Ready' con jquery disparador de pestañas:

 \ $ (función () $ 0);

Nota: Las barras diagonales al inicio de $ (function () es escapar de la PS carácter: de lo contrario, TextMate pensará que es una variable para que lo intente y lo represente!

También podría simplemente asignar todos estos a un jquery tab-trigger, luego, cuando lo ejecute, obtendrá un menú desplegable para elegir. Esto es útil si prefiere no memorizar grandes grupos de nombres de fragmentos!


Fragmentos De Nettuts

También tengo un paquete para las diversas etiquetas de las que dependen los artículos de Nettuts, como:
Se accedió a 'Pre Code Block' usando nt-pre tab-trigger:

 
 $ 2 

Acceso a 'Tuts Image' usando el disparador de pestañas nt-img:

 

Cuando escribo artículos, uso una plantilla pequeña para que sea más fácil de leer en la corrección de pruebas. Este fragmento tiene un ejemplo de "reflejo" en las etiquetas de Título y H1. Accedo a esto usando el disparador de pestañas de la plantilla nt:

  $ 1: TÍTULO 

$ 1

$ 2: texto de resumen

$ 4: Encabezado

$ 5: ¡Empieza a escribir! Use H3 para encabezados y H4 para subtítulos

$ 0