Sublime Text 3 + Emmet

Tutorial de como instalar el Editor de Texto Sublime Text 3 junto con el Plugin Emmet

 

¿Que es Sublime Text?

Sublime Text es un editor de código multiplataforma ligero. Es una herramienta ideal para programar sin distracciones con su interfaz de color oscuro y la riqueza de coloreado de la sintaxis, centra nuestra atención completamente.

Sublime Text permite tener varios documentos abiertos mediante pestañas, e incluso emplear varios paneles para aquellos que utilicen más de un monitor. Dispone de modo de pantalla completa, para aprovechar al máximo el espacio visual disponible de la pantalla.

¿Que lenguajes soporta?

El sistema de resaltado de sintaxis de Sublime Text soporta un gran número de lenguajes:

  • C
  • C++
  • C#
  • CSS
  • HTML
  • Groovy
  • Java
  • JavaScript
  • Perl
  • PHP
  • Python
  • Ruby
  • SQL
  • Y Muchos más!…

Descargar Sublime Text

Para descargar el Sublime Text solo hace falta ingresar a su Sitio Web e ir hasta la parte de  abajo y apretar en “Download for Windows” en caso de que tengas windows, obviamente. La instalación es como la de cualquier otro programa.

¿Que es Emmet?

Emmet se trata de un plugin que a base de escribir pequeñas abreviaciones genera grandes estructuras de código HTML y CSS, es un plugin soportado por muchos editores de texto.

Instalar Emmet

Para instalar Emmet en nuestro Sublime Text tenemos dos formas, una rápida y cómoda (Usando el Package Control del Sublime Text)  y otra larga y molesta (Descargandolo manualmente) así que, vamos a optar por la primera!.

Lo primero que tenemos que hacer es instalar el Controlador de Paquetes (Package Controll) de Sublime Text el cual nos permitirá realizar la instalación a través de él. El Controlador de Paquetes es una especie de plugin que nos permite descargar los demas plugins y mantenerlos actualizados. Para descargarlo ingresamos en el siguiente enlace .

Una vez en la pantalla, seleccionamos la solapa de nuestra versión de Sublime Text, en nuestro caso es SUBLIME TEXT 3 y copiamos el texto.

Una vez que tengamos el código copiado, ingresamos en nuestro Sublime Text y en el menú superior seleccionamos View → Show Console, y debajo de todo nos aparecerá la consola. Todo lo que debemos hacer es pegar el código que tenemos copiado y presionar enter.

Esperamos unos minutos a que se descargue e instale, luego presionamos Ctrl + Shift + P, nos aparecerá un cuadro de texto en donde escribiremos Install y en las opciones tendremos Package Control: Install Package, la seleccionamos.


Nos va a abrir otro recuadro más con muchas opciones, todo lo que tenemos que hacer es escribir “Emmet” y presionar enter y listo! Tenemos nuestro emmet instalado. Para probarlo puedes utilizar algunas de las abreviaturas, por ejemplo: html:5   Al poner “html:5” y seguidamente apretar tab, les va a dar toda la estructura básica de un documento html 5

Abreviaturas para Emmet

Emmet cuenta con muchas abreviaturas muy útiles, algunas de ellas son:

PARA VER TODAS LAS ABREVIATURAS EXISTENTES PUEDEN INGRESAR A LA DOCUMENTACIÓN DESDE ESTE ENLACE

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *