Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sublime Text
Webdesign

Útiles atajos y consejos para un flujo de trabajo más rápido en Sublime Text 3

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Sublime Text 3 tiene un montón de características y atajos con que jugar para el codificador moderno. Echemos un vistazo a los más importantes los cuales creo impulsarán tu flujo de trabajo a un nuevo nivel. Aprende como usar atajos básicos, trabajar con proyectos o manejar pestañas muchas veces sin siquiera cliquear el mouse.

Trabajando Con Proyectos

Conozco muchos desarrolladores que no utilizan ésta impresionante característica. ¿Cuál es tu proceso típico si trabajas en un proyecto? Tal vez algo como:

  1. Abrir Sublime Text
  2. Abrir Finder
  3. Buscar el proyecto
  4. Arrastrar el folder al editor
  5. Buscar archivos y abrirlos
  6. Comenzar el desarrollo

No lo suficientemente bueno. Digamos que ayer en la tarde trabajaste en un archivo y esta mañana quieres continuar donde te quedaste. El flujo de trabajo que mencionamos es bastante ineficiente, así que en vez de eso déjame llevar tu atención a Project en la barra de menú de Sublime:

Creando Tu Primer Proyecto

Cada proyecto guardado tiene su propio archivo de configuración, así que para empezar necesitamos algún lugar en nuestro sistema para almacenarlos. Comienza creando una carpeta, de la manera en que acostumbres, llamada sublime-projects (por ejemplo).

Después comienza un nuevo proyecto, de manera normal, comenzando un nuevo archivo o carpeta en Sublime. Ahora ve a Project > Save Project As... Navega a la carpeta sublime-projects, nombra tu proyecto y guárdalo. 

Obtén Una Lista de Proyectos Guardados

Para acceder rápidamente a una lista de proyectos previos usa el atajo CMD-CTRL-P. Teclea una búsqueda para filtrar la lista, presiona entrar e inmediatamente abrirás las carpetas y archivos de ese proyecto en la barra lateral. 

Encontrarás tu proyecto con carpetas y pestañas abiertas o cerradas exactamente como las dejaste.

Cambiar de proyectos, ida y vuelta, es también bastante fácil de ésta manera.

Buscando Archivos Dentro de un Proyecto

Considero a éste el mayor ahorrador de tiempo de siempre. Teclear es mejor que cliquear cuando se busca un archivo, así que, con un proyecto abierto, presiona  CMD-P ¡y empieza a teclear!

Manejando Pestañas

Las pestañas son una manera increíble para darte un resumen de tu proyecto actual. Casi siempre usarás una pestaña para archivos HTML, otra para CSS y algunas veces una última para JavaScript. Con estos atajos rápidos es posible crear pestañas velozmente:

  • CMD-2 - Agrega dos pestañas
  • CMD-3 - Agrega tres pestañas
  • CMD-4 - Agrega cuatro pestañas

Naveguemos ahora a través de todas estas pestañas:

  • CMD-ALT-FLECHA IZQUIERDA - Ir a la anterior pestaña
  • CMD-ALT-FLECHA DERECHA - Ir a la siguiente pestaña

Selección

No soy fan de seleccionar con el ratón – es demasiado complicado y lento. Por ejemplo, empieza en el inicio de una palabra, después mantén pulsado el botón del ratón y arrástralo al final de la palabra o línea. A menudo no tendrás la selección que querías. ¡Usa los siguientes atajos y no quedarás decepcionado!

Encuentra Todas las Instancias que Coincidan con tu Selección

Una por una:

Haz una selección y encuentra, una por una, otras instancias presionando CMD-D.

Todo a la Vez:

ADe nuevo, haz una selección, pero ahora para encontrar todas las instancias a la vez presiona CMD-CTRL-G. 

Selecciona Línea por Línea

Aquí hemos seleccionado una línea completa y ahora podemos seleccionas líneas completas posteriores, paso a paso, con CMD-L.

Selecciona a Todos los Hijos

Haz clic en un elemento con algunos elementos hijos. Después presiona CMD-SHIFT-J y todos los elementos hijos serán seleccionados.

Diversos Ahorradores de Tiempo

Éstos son otros pocos atajos sin los que no podría vivir.

Saltar a una Función

Para buscar una función en el archivo actual presiona CMD-R y después ingresa una palabra de búsqueda para filtrar a la función que quieres encontrar.

Copiar la Línea Actual

Haz clic en la línea que quieres copiar y después presiona CMD-SHIFT-D. Ahora tienes una línea duplicada, idéntica en todos los sentidos y el cursor salta con ésta.

Intercambiar Líneas

Presiona CMD-CTRL-↓ ó CMD-CTRL-↑ para cambiar la posición de una línea.

Cerrando la Etiqueta HTML Actual

Si escribes la etiqueta de inicio <span> y no quieres cerrarla manualmente, entonces presiona CMD-ALT-. y Sublime Text la cerrará por ti. Otro método es escribir span sin corchetes angulares y después presionar TAB.

Alternar Visibilidad de la Barra Lateral

Sublime Text incluso tiene un atajo para ocultar y mostrar la barra lateral. Presiona CMD-K-B para alternarla.

Cursores Múltiples

Crear Cursores Múltiples

¿Así que quieres tener más de un cursor? Mantén presionado CMD y después haz clic en el lugar donde quieras un segundo cursor. Puedes repetir el proceso y tener tantos cursores como quieras.

Arrastra Para Crear Múltiples Cursores

Para la primera técnica tienes que hacer clic en cada lugar donde quieras otro cursor. Pero tal vez tengas algunas líneas donde quieras un cursor en cada una, todas alineadas verticalmente. No hagas clic en cada una por separado, en lugar de eso presiona ALT y después, con el botón izquierdo del ratón presionado, arrastra tu cursor arriba o abajo.

Plugin para Escritores: Markdown Preview

Personalmente a menudo escribo Marcado en Sublime Text, pero para empezar no tuve una vista previa de mi documento. Después encontré Markdown Preview

Para instalarlo, ve a tu editor, presiona CMD-SHIFT-P para abrir Package Manager, busca por Package Control: Install Package, después busca por Markdown Preview y presiona entrar para instalarlo. 

Ahora, abre tu archivo de Marcado, ejecuta el atajo CMD-SHIFT-P de nuevo y busca Markdown - ahí encontrarás el elemento Markdown Preview: Preview in Browser. Dale clic y tu navegador por defecto abrirá una pestaña con la vista previa.

Plugin Que Debes Tener: Hayaku

Este plugin te ayudará a escribir CSS más rápido y agregar algunas ayudas. Hayaku es comparable con Emmet, pero con muchas más características particularmente para propiedades en CSS.

Abreviaciones Inteligentes de Valores CSS

Aquí hay algunos ejemplos de abreviaciones de propiedades/valores usando Hayaku (presiona TAB para ejecutar cada uno):

  • por  position: relative;
  • mt10 margin-top: 10px;
  • cF  color: #FFF;
  • brr  background-repeat: repeat;
  • tdn text-decoration: none;

Incrementa y Disminuye Valores con el Teclado

Es posible usar el teclado para incrementar o disminuir valores numéricos. Pon tu cursor sobre el número y usa los siguientes atajos.

  • Incrementa o disminuye valor numérico por 0.1: ALT-CTRL-↑ ó ALT-CTRL-↓
  • Incrementa o disminuye valor numérico por 1:ALT-↑ ó ALT-↓ 
  • Incrementa o disminuye valores numéricos por 10: ALT-SHIFT-↑ ó ALT-SHIFT-↓

Ideas Finales

¡Todos deberían aprender atajos en las aplicaciones de su elección! Si alguna vez te has frustrado por tener que repetir tareas una y otra vez, entonces investiga un atajo. Si encuentras uno, toma un tiempo para aprenderlo; te remunerará una y otra vez.

¿Cuáles son tus atajos favoritos para Sublime Text 3? ¿Cuáles usas diariamente?

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.