Instalar y preparar Sublime Text para Programación Web

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.

sublime text para progracion 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

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:

Sublime Text

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

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

y pulsas TAB

te generará el código siguiente

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.

Que genera:

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

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

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:

Sublime Text

y pulsamos Ctrl-Alt-A, obtenemos esto:

Sublime Text

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.

 

¿Qué te pareció este artículo?
  • Excelente 
  • Interesante 
  • Regular 
  • No era lo que buscaba 
  • Poco informativo 
Facebooktwittergoogle_plusmail

Tu comentario

opiniones

Comments are closed