Sublime Text es un potente editor de textos multiplataforma: se puede ejecutar tanto en OS X, como en Windows o Linux. Es muy fácil de aprender y altamente personalizable. Cuando lo ejecutamos por primera vez nos va a aparecer una pantallita marrón que vamos a decir “pues no hay para tanto, es como un notepad pero en oscuro”. Hay muchos editores de texto para desarrollo web, pero después de probar éste, los otros quedan en el banquillo.
Características de Sublime Text
Open Folder
Esta utilidad nos da la facilidad de tener un navegador de carpetas en la izquierda donde, con la ayuda de un pluggin que comentaremos luego, podremos manejar todas las carpetas del proyecto.Layout de Sublime Text
Cada vez que pulsemos sobre uno de los archivos de la barra lateral este se abrirá en el editor. Si queremos que se abra en una nueva pestaña, lo que haremos es hacer doble clic, pues en otro caso se visualizará en la pantalla actual. Podemos modificar el layout de Sublime Text como más nos convenga, poniendo varias columnas o filas, seguún nuestras preferencias. Para ello iremos a View > Layout y allí seleccionaremos entre todas las opciones existentes.
Esquema de Colores
Como puedes observar por el pantallazo anterior, mi esquema de colores es diferente del que viene por defecto en Sublime Text v.2. Para editarlos es tan fácil como ir a Preferences > Color Scheme y escoger el que más se adapte a tus gustos personales. Incluso tienes una opción que emula al Mac, ideal para los frikis de emacs.Buscar en Sublime Text
Uno de los puntos fuertes de Sublime Text es la rapidez de búsqueda, va a la velocidad del rayo! Para buscar algo simplemente teclea Ctrl+P y te aparecerá un buscador. Si por ejemplo pones .css verás un listado con todos los archivos css que contiene el proyecto con el que estás trabajando en el momento. Yo, por ejemplo, en mi nuevo proyecto estoy utilizandoBones para WordPress, que contiene varios archivos css en la carpeta library, y con este comando me es muy fácil trabajar con todos los archivos del proyecto.
Pero hay más, mucho más! Si quieres por ejemplo buscar margin dentro de los archivos css, lo que has de escribir es .css#margin y te aparecerá un listado con todos los resultados, Más todavía, si escribes .css# te aparecerá un listado con todas las palabras que aparecen en los archivos css del proyecto.
Pero la cosa no termina aquí. Imagínate ahora que tenemos varios archivos de JavaScript, sin ni tan sólo abrirlos podemos encontrar las funciones que hay escribiendo .js@. Ahora nos aparecerá un listado con todas las funciones que contienen los archivos JavaScript del proyecto. Otra manera de ir a los métodos es con el shortcut Ctrl+R.
Para ir a una línea utilizaremos el comando Ctrl+G
Si queremos buscar cualquier comando o función de Sublime Text v.2, en lugar de hacerCtrl+P lo que haremos es Shift+Ctrl+P, con lo que nos aparecerá un listado con todas las posibilidades disponibles:
Los snippets en Sublime Text
Como comentaba al principio, uno de los puntos fuertes de Sublime Text es la amplia comunidad de apoyo que hay, lo que ha hecho que hayan muchos snippets disponibles. Los snippets nos facilitan muchísimo el tiempo de trabajo.Por defecto vienen algunos snippets instalados. Si hacemosShift+Ctrl+P y escribimos Snippetveremos un listado con los Snippets que tenemos disponibles.
Podemos insertar snippets de dos maneras, una buscándolo con Shift+Ctrl+P y la otra mucha más rápida es por la palabra clave y pulsando la tecla Tab. Así, si vamos al texto y escribimos lorem y pulsamos Tab lo que nos aparecerá es un texto de lorem ipsum. Y si por ejemplo escribimos html y pulsamos Tab se nos generará el código básico para empezar a crear un archivo html. Lógicamente el archivo deberá tener una extensión de html, php o similar, porque en otro caso el snippet no funcionará.
Instalando Plugins
Package Control
Se trata, básicamente, del padre de todos los plugins, desde él podremos gestionar la instalación, desinstalación, edición y muchas cosas más del resto de plugins, de forma rápida y, sobre todo, muy intuitiva.
Por eso mismo, es el más complicado de instalar, puesto que el resto se hacen a través de él, pero este debemos hacerlo con la consola que incluye Sublime Text. Basta con aplicar los siguientes pasos:
1- Accede a la página de instalación del plugin.
2- Escoge la versión del programa que tengas instalada y copia el código que aparece debajo. (en este artículo nos centraremos en plugins válidos para Sublime Text 3, aunque la mayoría son aptos para ambas versiones)
3- Abre la consola de Sublime Text desde View -> Show console, que se encuentra en la barra superior de menú.
Pulsamos enter y reiniciamos Sublime. Ahora en Preferences aparece la opción de Package Control. Otro modo de acceder a las opciones de Package Control es con Shift+Ctrl+P y escribiendo Package Control. Si seleccionamos la opción Package Control: Discover Packages se nos abrirá una página web con un enorme listado de plugins para Sublime.
EMMET
Este plugin completa el código de todo lo que te puedas imaginar, mediante introducción de unas pocas letras.
Pero no sólo eso, sino que a través de determinados comandos, podemos escribir toda una estructura de capas, en una línea.
Os voy a poner algunos ejemplos pero os aconsejo que os echéis un vistazo a la documentacion de EMMET , todo lo que hace es alucinante.
MUY IMPORTANTE: si el documento no está guardado con la extensión correspondiente a cualquier sintaxis html, NO FUNCIONA.
- Crear el documento html: Escribimos html:5 y dando tabulador ( a partir de ahora +Tab), nos genera toda la estructura básica de un HTML5.
- Completar etiquetas: Simplemente con escribir el texto de una etiqueta+Tab, completa la etiqueta con su correspondiente cierre.
- Añadir una clase o un id a una etiqueta: Todo tiene una sintaxis muy parecida a CSS, de modo que si queremos poner una clase o un id, lo hacemos con un punto o una almohadilla.
div.miClase+Tab -> <div class="miClase"> </div>
div#miID+Tab -> <div id="miID"> </div>
Sidebar Enhancements
Este plugin nos transforma el menú contextual del Sidebar de Sublime, que es bastante básico, en un completísimo gestor de archivos y carpetas.
Color Picker
Super útil para CSS, con CMD+MAY+C nos abre el color picker propio del sistema operativo, sin más.
Y os hago un 2×1 y os cuento otro, Color Highlighter para identificar los colores que tienes en tu CSS, porque si pones el cursor encima del color, te lo muestra!! Mola mucho mucho…ya no tienes que abrir el picker para saber si el color #fsjgoe era rosa palo o verde aguamarina
Clipboard History
Se trata de tener accesible el histórico de lo que has copiado.
Cuántas veces copias una línea, y cuando te das cuenta, resulta que has copiado otra después, sin haber utilizado la primera, y te metes en un bucle de: “pego ésto ahora, porque si no también lo pierdo, y vuelvo a por lo otro que copié, espera, dónde estaba…me lo apunto en un archivo nuevo para cogerlo ahora, guardar, no, espera joder!! me lo tatúo en la frente? Ahhhhgggg!!!”
Pues eso, abres el histórico y punto. Nada de tatuajes en la frente.
La pega que le pongo es que la combinación de teclas es como para unas prisas, desde luego los que seáis poco coordinados lo tenéis chungo, pero al menos están todas juntas.
CMD+ALT+CTRL+V y nos sale el desplegable:
Sublime Linter
Este plugin recuerda mucho a los grandes IDE, pues su función es realizar tu código en tiempo real, detectando posibles errores y advirtiéndote de los mismos, para que puedas solucionarlos antes de probarlo en vivo. Funciona con varios lenguajes, entre otros PHP, Python, Java…
Es cierto que aún no detecta todos los errores al momento, pero si los más cometidos, como son dejarte algún paréntesis/llave abiertos, olvidarse algún fin de sentencia…y todos esos errores que pueden llegar a ser un quebradero de cabeza para el desarrollador en cuestión.
Bracket Highlighter
Aunque es un plugin muy sencillo, es también muy útil. Por muy escrupulosos que seamos siempre podemos tener problemas al saber donde empieza o acaba alguna función, donde abre o cierra cierta llave en nuestro código. Para ayudarnos en esta compleja tarea llega este plugin que se encarga de resaltar todas estas marcas para que sepamos donde abre y cierra cada una.
Y ya está, no hace nada más este plugin, ¿acaso es menos útil por eso? Para nada, resulta muy interesante si queremos mantener un código muy limpio y ordenado.
Atajos de Teclado
| Ctrl+C | (si no hay seleccion) Copia toda la linea |
| Ctrl+X | (si no hay seleccion) Corta toda la linea |
| Ctrl+⇧+K | Elimina la linea |
| Ctrl+↩ | Inserta salto de linea en linea anterior |
| Ctrl+⇧+↩ | Inserta salto de linea en linea anterior |
| Ctrl+⇧+(↑-↓) | Mueve la linea completa hacia arriba o hacia abajo |
| Ctrl+L | Selecciona la linea completa (repetir para seguir seleccionando lineas |
| Ctrl+D | Selecciona palabra (repetir para seguir seleccionando las ocurrencias de la palabra [multi seleccion] |
| Alt+f3 | Selecciona todas las palabras de una vez |
| Ctrl+M | Saltar al la llave de cierre o comienzo {} |
| Ctrl+⇧+M | Selecciona todo dentro de la region sea: (parentesis, llaves, corchetes) |
| Ctrl+KK | borra desde el cursor hasta el fin de linea |
| Ctrl+K+⌫ | borra desde el cursor hasta el fin de linea |
| Ctrl+] | indenta la linea(s) |
| Ctrl+[ | Des-indenta la linea(s) |
| Ctrl+⇧+D | Duplica la linea(s) o la seleccion |
| Ctrl+J | Une la linea de abajo al final de la linea actual |
| Ctrl+ / | Comenta/Des-comenta la linea actual (o seleccion) |
| Ctrl+Y | Vuelve a hacer o repite ultimo comando |
| Ctrl+⇧+V | Pega la copia indentando correctamente |
| Ctrl+Space | select next auto-complete suggestion |
| Ctrl+U | Rehacer suave (salta a la linea del cambio antes de rehacer) |
Navigation/Goto Anywhere
| Ctrl+P | Abre-archivos rapidamente, busca en los archivos del proyecto o cercanos |
| Ctrl+R | Ir a: funciones y clases del archivo actual (lo mismo que Ctrl+P y tipear @) |
| Ctrl+; | Ir a: palabra del archivo actual (lo mismo que Ctrl+P y tipear # |
| Ctrl+G | Ir a: palabra del archivo actual (Lo mismo que Ctrl+P y tipera : |
General
| Ctrl+⇧+P | Consola de comandos |
| Ctrl+KB | Alternar barra lateral |
Find/Replace
| Ctrl+F | Buscar |
| Ctrl+H | Reemplazar |
| Ctrl+⇧+F | Buscar en archivos |
Tabs
| Ctrl+⇧+t | Abre la ultima tab cerrada |
| Ctrl+PgDn o Ctrl+PgUp | Recorre las pestanas abiertas |
| Ctrl+⇆ | Recorre las pestanas abiertas |
Split window
| Alt+⇧+2 | Dividir en 2 columnas |
| Alt+⇧+1 | Revertir a 1 columna |
| Alt+⇧+5 | Grilla (4 grupos) |
| Ctrl+[1,2,3,4] | Saltar a grupo |
| Ctrl+⇧+[1,2,3,4] | Mover el archivo al grupo especifico |
Bookmarks
| Ctrl+F2 | Setea favorito |
| F2 | Ir a: proximo favorito |
| ⇧+F2 | Ir a: favorito anterior |
| Ctrl+⇧+F2 | Limpia favoritos |
Text manipulation Html
| Ctrl+KU | Convertir a mayusculas |
| Ctrl+KL | Convertir a minusculas |
Html
| html + TAB | Adjunta la estructura Básica del cuerpo de una página (Nota: hay que tener activado el lenguaje html dentro de sublime text) Opción View – Syntax |
| div#+ TAB | Crea la estructura: <div id=”hola”></div> |
Esta de puta madre jorgito ! Felicidades
ResponderEliminar