Este post lo coloco aquí en relación con el último post publicado en esta web. Se trata de algunos buenos plugins para Sublime Text 3. No estarán todos los que son ni son todos los que están, pero son para mí, los plugins que le meten gasolina al Sublime, y lo convierten en el maquinón que hace que el trabajo sea mucho más productivo y rápido.

Como en mi primer post, los plugins están enfocados al desarrollo web, hay infinidad de artículos al respecto, pero veo que hay que buscar mucho para encontrar “otros” que no se repitan una y otra vez, y que me han parecido potentísimos.. aunque inevitablemente hay algunos básicos que deben estar.

Y como en el primer post también, los que utilizáis Windows o Linux cambiad la tecla CMD por CTRL.
Importante: Todo está probado en Sublime Text 2, y por el momento en Sublime Text 3 estoy teniendo buenos resultados.

Bueno, ahora vamos al tema…

Plugins para Sublime Text 3

1. Package Control

Básicamente es el padre de todos, es el que nos permite gestionar la instalación, desinstalación y muchas más cosas, de cualquier plugin, de forma rápida e intuitiva.

La forma de instalarlo es un poco rara, pero intentaré que lo entendáis:

– Ir a la página de instalación.
– Selecciona la pestaña SUBLIME TEXT 2
– Copia el código que aparece debajo:
– Abre la consola de Sublime (Menú/View > Show Console)
– Pega el código que acabas de copiar.
– Enter.
– Reinicia Sublime.

Una vez instalado, mostramos los controles con CMD+MAY+P, nos saldrá un desplegable donde, al ir escribiendo en el input, nos va filtrando las opciones que encajan, nosotros utilizaremos sobre todo: Install package, Remove Package, List Package, Enable Package, y Disable Package, que si no sabéis traducir ya os vale, pero por si acaso; Instalar, desinstalar, enumerar, habilitar y deshabilitar los plugins.
A partir de ahora, la instalación de todos los plugins que os muestro se hace de la misma manera:

– CMD+MAY+P -> INSTALL PACKAGE -> Nos sale una lista de todos los plugins disponibles en el repositorio de Sublime, buscaremos cada uno, lo seleccionamos y ya está.

– Aconsejo reiniciar Sublime cuando instaléis un plugin, no lo necesitan todos pero muchos sí. Así no os volvéis locos si pensáis que no funciona.

2. El Santo Grial: EMMET

Como Prince, “el artista antes conocido como Zen-Coding” va a hacer que se nos olvide escribir html, 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 donde tenéis todo, todo, 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>

– Anidar capas: el símbolo > añade hijos a una capa, el símbolo + añade hermanos, el * multiplica por un número… así, la siguiente línea + Tab, genera lo que veis en la imagen:

3. sFTP

Esta maravilla la he descubierto hace poco y me tiene totalmente enamorada, básicamente se trata de tener un cliente ftp integrado en nuestro Sublime, lo que nos permite editar cualquier archivo remoto desde local, y simplemente con guardarlo, se actualiza en el servidor.

En serio, es una gozada para cambios y modificaciones finales, evitándonos el trasiego de archivos de acá para allá.

Os cuento como se configura así de manera rápida:

– Lo instalamos como todos desde el Package Control y reiniciamos Sublime.

– En MENÚ/FILE-> nos ha creado una nueva sección SFTP/FTP, abriremos SETUP SERVER.

– Establecemos los parámetros de la conexión, y guardamos el archivo con el nombre que queramos, para identificar el sitio remoto (sin extensión ninguna).

– Una vez guardado el archivo de configuración, para abrir la conexión con el servidor simplemente vamos al menú (como al principio) pero ahora seleccionamos: MENU->SFTP/FTP->BROWSE SERVER.

– Se nos abre un desplegable con los servidores que tengamos configurados, elegimos el que queremos, y nos abre otro desplegable en el directorio raíz remoto, nos movemos por él mediante clicks, y cuando estemos en el archivo que queremos, lo seleccionamos y podemos editarlo, renombrarlo y demás opciones que veis.

Si le damos EDITAR, se nos abre en Sublime, también veréis en la consola como se ejecutan las operaciones de conexión, lo editamos, Y AL GUARDAR, SE SUBEN LOS CAMBIOS, así que ojito con la opción SAVE ON FOCUS LOST que os expliqué en el primer post, porque si la tenéis activa y cambiáis de archivo, subís los cambios sin querer.

4. 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.

5. YUI Compressor

Fundamental para crear los archivos .min de nuestros .css y .js una vez terminado el proyecto.
Con el archivo que quiero minimizar abierto, simplemente pulsando CMD+B nos crea el .min.css o .min.css en la misma carpeta donde tenemos los originales, por supuesto sin pisarlos.

Os saldrá un mensaje en la consola cuando se ejecute el plugin.

6. PREFIXR

Esta maravilla nos pone los prefijos CSS3 necesarios para el crossbrowser, sin que nosotros tengamos que estar escribiéndolos.

Escribes la regla CSS te colocas dentro del bloque, le das CMD+CTRL+X y te pone los prefijos que se necesiten.

Se puede aplicar a bloques de código que comprendan varios selectores, seleccionando todo, SIEMPRE QUE NO HAYA COMENTARIOS ENTRE ELLOS, este plugin se tuesta con los comentarios.

Revisad siempre el código que os genera porque a veces hace cosas raras, pero compensa con creces el trabajo de ponerlos a manita.

7. 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… (los tíos quedaos con lo de rosa o verde, na más.)

8. jQuery

Completo paquete de snippets para jquery, que hace que no tengamos que escribir las funciones, métodos y variables más comunes.

Además como todos los snippets en Sublime son personalizables, podemos modificarlos como mejor nos parezca.

Como siempre, se trata de escribir unas pocas letras, que nos muestre el abanico de funciones posibles y que nos las escriba él solito. Algunos ejemplos:

$+Tab -> $(‘string/element/array/function/jQuery object/string, context’)

this+Tab -> $(this)
fdt+Tab -> fadeToggle(‘slow/400/fast’, function() { });

9. Search Stack Overflow

¿Cuántas veces has terminado encontrando la solución a tu problema en Stack Overflow?? Pues busca directamente ahí y no te marees… este magnífico plugin permite buscar directamente en Stack Overflow desde el editor, y abre el navegador en los resultados de búsqueda.

Lo puedes hacer de dos formas;
– Seleccionas el texto a buscar -> botón derecho, “Stack overflow Search”.

– Desde una caja de búsqueda normal, abres el command palette mediante CMD+MAY+P, pones “stack” y te aparece la opción “Search from input”.  Te aparece el input de buscar de siempre y ya está.

Parece largo pero os aseguro que se tarda menos que en ir al navegador, meter la frasecita, darle al “buscar” y moverte por los resultados de google. En cuanto te familiarizas con el CMD+MAY+P es casi inmediato.

10. Search WordPress Codex

Yaaaaa.. ya sé que todos somos super profesionales del front, y que wordpress es para los que no saben, pero nos toca tragar y hacer webs en wordpress por un tubo, y como nosotros sabemos, lo hacemos por código, y como lo hacemos por código, este plugin nos viene de coña para consultar en el Códex directamente desde Sublime.

Funciona igual que plugin de Stack Overflow. La búsqueda también puede hacerse mediante selección o mediante input.

Además no se limita a buscar en el Codex, sino que puedo elegir dónde busco de estas cuatro opciones:
– Search WordPress Codex
– Wordpress Function Reference
– Search QueryPosts
– QueryPost Function Reference

Maravilloso, si tienes dudas de lo que hace una función, la buscas en el Function Reference y te abre la página de ESA función…en fin…una gozada.

11. WordPress Package

Seguimos con WordPress, este plugin es una completísima colección de snippets para autocompletar todo lo que os imaginéis de sintaxis de nuestro querido CMS.

Está basado en el paquete para TextMate, de modo que para ver cómo funcionan los snippets debéis consultar en el original.

Merece la pena echar un vistazo a toda la documentación porque dejaréis de escribir código cuando desarrolléis WP.

12. Clipboard History

Este plugin también lo descubrí hace poco, y aunque en principio no parece muy útil, estoy viendo que lo es más de lo que creía.

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:

Y con esto amiguitos, cumplo con mis posts sobre Sublime Text, espero que os sea útil la información.
Me encantaría que me contarais cuál usáis vosotros, porque seguro que habéis descubierto plugins muy interesantes que desconozco.
Si tenéis alguna duda, estoy a vuestra entera disposición. A disfrutar desarrollando!

13. Sublime Linter

Sublime Linter intenta agregar algunas funcionalidades de un IDE a Sublime Text, pues examina el código y detecta en tiempo real en donde podría haber posibles errores. Además de soportar un número considerable de lenguajes no es invasivo dentro de la interfaz de Sublime Text y es muy fácil de utilizar.

14. Soda-Theme

Este último plug-in cae dentro de la categoría de bonus ya que realmente no agrega ninguna funcionalidad de desarrollo a Sublime Text, sin embargo te permite crear, modificar y guardar diferentes diseños y combinaciones de colores para la interfaz de Sublime Text y hacerlo aún más personalizable.

Estos son solo algunos de los plug-ins más recomendables para Sublime Text, ya que tengas instalado Package Control podrás explorar por tu propia cuenta cientos más y si encuentras alguno útil que quieras dar a conocer no dudes en compartirlo aquí.

Bueno… como dije al principio, estos no son todos, pero si algunos que te harán la vida un poco más fácil. Ahora si buscas más, solo tienes que buscar un poco dentro del Package Control … más fácil ya no puede ser.