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.
Puede ver todos los accesos directos y funciones de TextMate en el menú 'Paquetes'. Éstos son algunos de los que uso regularmente:
⇥ | Lengüeta |
⇧ | Cambio |
⌃ | Controlar |
⌥ | Opción (Alt) |
⌘ | Mando |
⎋ | Escapar (esc) |
↩ | Regreso |
↓ ← ↑ → | Teclas de flecha del teclado |
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 |
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 |
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 |
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.. |
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.
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:
¿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!
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