Instalar y preparar Sublime Text para Programación Web
Sublime Text es un excelente editor de código multiplataforma que soporta una gran cantidad de lenguajes de programación. Veamos cómo instalar algunos complementos útiles a fin de optimizar nuestro trabajo para programación web.
Se distribuye de forma gratuita, pero no es software libre. Tiene algunas características muy útiles a la hora de programar como el minimapa (una vista en miniatura de todo nuestro código estratégicamente colocado a la derecha), la multiselección y el multicursor y lo mejor: soporte para snippets y pluggins de los cuales hay una amplia variedad para personalizar aún mejor el editor.
Para instalar Sublime Text
Ve al sitio de descargas de Sublime Text: https://www.sublimetext.com/3
Selecciona tu sistema operativo y versión que mejor se ajuste a la plataforma en la que lo vas a utilizar.
Una vez descargado, instálalo siguiendo los pasos del asistente.
Preparar Sublime Text para Programación Web
Tal como viene de paquete, Sublime Text ya es muy útil para escribir código y programar. Pero puede funcionar aún mejor.
Instala Package Control
Package Control es un gestor de paquetes. Sirve para descubrir, instalar y actualizar paquetes con nuevas funciones para el editor. Este es un paso previo que nos permitirá encontrar muchas funcionalidades que nos permitirán preparar Sublime Text para programación web.
Vaya a la página de instalación de Package Control: https://packagecontrol.io/installation
Instalación de Package Control
Las instrucciones piden que copiemos el texto que allí nos proporcionan y lo peguemos en la consola de Sublime Text. Para hacer esto, desde Sublime Text abrimos el menú View y la opción Show Console. En el campo de texto que se abre, pegamos el código que copiamos y pulsamos Enter. Nos mostrará un mensaje como el siguiente:
Nos confirma que Package Control ha sido instalado en Sublime Text.
Instala Emmet
Emmet nos permite crear bloques de etiquetas HTML utilizando una sintaxis abreviada.
Estando en Sublime Text pulsa Ctrl + Shift + P
En el cuadro escribe install package
A continuación buscamos Emmet
Instalación de Emmet
Seleccionamos la primera opción Emmet y listo.
Reinicia Sublime Text para que todo funcione correctamente.
Ya puedes utilizar toda la funcionalidad de Emmet, por ejemplo si escribes
html>(head>title)+body
y pulsas TAB
te generará el código siguiente
<html> <head> <title></title> </head> <body> </body> </html>
Como puedes ver, evitamos escribir mucho código.
Otro ejemplo: Esta línea nos evita tener que copiar, pegar y editar muchas veces una lista.
ul>(li>a[href="pagina$.html"]{item$})*5
Que genera:
<ul> <li><a href="pagina1.html">item1</a></li> <li><a href="pagina2.html">item2</a></li> <li><a href="pagina3.html">item3</a></li> <li><a href="pagina4.html">item4</a></li> <li><a href="pagina5.html">item5</a></li> </ul>
Entender la sintaxis de Emmet es muy intuitivo y eleva mucho nuestra productividad.
Color Hightlighter
Nos permite disponer de un preview del color que estamos codificado. Así, si escribimos el código #ffb400, el pluging nos muestra directa e inmediatamente el color en la pantalla.
Color Hightlighter
ColorPicker
Nos permite abrir una ventana para seleccionar un color. Esto es posible con múltiples y diversas aplicaciones, pero si deseamos hacerlo desde Sublime Text necesitamos un plugin como ColorPicker.
Color Picker
Alignment
Este plugin es sencillo pero muy valioso, pues nos permite mantener el código fuente de nuestra aplicación siempre legible. Por ejemplo, si tenemos el siguiente código:
y pulsamos Ctrl-Alt-A, obtenemos esto:
Jquery
Nos permite autocompletar, y nos ayuda con las funciones y métodos propios de jQuery, además de que colorear de acuerdo con la sintaxis.
Otras funciones interesantes de Sublime Text
Checa estas otras funciones que te permitirán escribir código de forma más rápida y más fácilmente.
Ctrl+Espacio. Abre un recuadro con opciones de texto relacionadas al código que estamos escribiendo. Si ya tenemos algo parcialmente tecleado, lo termina de escribir.
Ctrl+N. Crea un nuevo documento.
Ctrl-S. Guarda el documento actual.
Alt+1, Alt+2, etc. Nos lleva directamente al documento 1, 2, etc.
Ctrl-RePag, Ctrl+AvPag. Nos lleva a la pestaña anterior y siguiente.
Alt+Shift+2, Alt+Shift+3, etc. Nos permite dividir la pantalla para ver dos, o tres documentos.
Ctrl+Shift+2, Ctrl+Shift+2, etc. Abre el documento que está siendo actualmente utilizado en la sección 2 o 3, cuando tenemos la pantalla dividida.
Shift+F11. Entra en “modo sin distracción”. Oculta los menús, barras y paletas. Es diferente de F11 (pantalla completa) que deja la barra de estado y las pestañas.
Ctrl+Click. Función multicursor. Permite escribir en varios sitios a la vez.
Ctrl+D. Marca todas las apariciones de la palabra actualmente seleccionada. Si pulsamos repetidamente Ctrl+D se van seleccionando una a una y es posible editarlas con el multicursor.
Coméntanos qué otras funcionalidades de Sublime Text te han gustado.
Tu comentario
