Sublime Text 3 actualmente es uno de los editores web mas usados,  su entorno gráfico fácil de usar y agradable; que se puede usar independientemente del Lenguaje de Programación, Sistema Operativo ó perfil FrontEnd/BackEnd del usuario.

Sublime text

Dentro de las muchas razones  que tenemos para usar Sublime Text 3 estan:

  • Cualquier Sistema Operativo: Sublime Text 3 podemos instalarlo en Sistemas Operativos Windows, Mac OS X ó Linúx sin ningún problema, sólo bastará elegir el Sistema Operativo al momento de descargarlo.
  • Liviano: a comparación con otros editores web su tamaño es de aprox 8.7 MB

 

Instalando Sublime Text 3

Cuando ejecutamos la descarga la primera ventana que se presenta es la siguiente, click en Next

Instalando sublime text 3 en windows

Luego aparecerá la siguiente  ventana donde nos muestra la ruta donde se instalará el programa, presionamos el botón Next

Instalando sublime text 3 en windows

Luego,  en la siguiente ventana podemos elegir si insertamos el acceso del programa en la barra de menú de nuestro Sistema Operativo

Instalando sublime text 3 en windows

 

Luego la siguiente captura para validar la instalación, click en Install

Instalando sublime text 3 en windows

Para finalizar la instalación click en Finish

Instalando sublime text 3 en windows

 

Packages en Sublime

Cuando instalamos el Sublime Text 3 y ejecutamos se mostrará la siguiente ventana

sublime text 3

Ahora es hora de instalar los paquetes que se requiere.

Package: Importancia y uso

Los Packages ó paquetes nos permiten aumentar la productividad cuando utilizamos Sublime Text 3 ya sea para agilizar la escritura de codigo al momento de programar, sincrozinar con algún navegador, etc.

Instalar Package Control

Para instalar el Package Control tenemos 2 maneras:

Método 1:

Presionar la combinación de teclas CTRL + SHIFT + P, o también Tools / Command Palette

Paleta de comandos

escribimos package Control y seleccionamos Package Control: Install Package

package control

Método 2

En nuestro Sublime Text 3 instalado, nos vamos a View / Show console

show console sublime text 3

aparecerá lo siguiente

panel console sublime text

Ahora ingresamos a la Web packagecontrol.io, aparecerá la siguiente ventana

package Installation sublime text 3

Nos dirigimos a la opción SUBLIME TEXT 3, seleccionamos el codigo y copiamos y pegamos en la ventana de console de Sublime text 3

 

Y listo estaría solamente para instalar los paquetes que necesitemos

instalar paquetes sublime

Paquete Emmet

El package Emmet me permite autocompletar codigo HTML, para instalarlo primero debemos de ingresar al instalador de paquetes (CTRL + SHIFT + P), seleccionamos

Instalar package control

Luego en la siguiente ventana escribimos emmet y listo

emmet

Cuando instalamos un paquete debemos de verificar que en la barra de estado, parte inferior nos muestre que la instalación fue satisfactoria (successfully loaded)

fin instalacion emmet

 

Aquí una muestra de como podemos usarlo presionando al final la tecla TAB:

emmet autocompletar html

Package Browser Sync

Aveces vamos a necesitar trabajar con ambas ventanas a la vez (Sublime Text y el navegador Web) para visualizar los cambios automaticamente (sin actualizar en cada momento), tal como vemos en la captura

Sublime Chrome

entonces necesitaremos instalar el paquete Sublime Server, primero la combinación de teclas CTRL + SHIFT + P, luego escribimos browser y elegimos Browser Sync

BrowserSync

Para Ejecutar el paquete nos vamos a Browser Sync

Ejecutar browser sync sublime text

Notaremos que en el navegador que estemos trabajando se visualizará en la barra de búsqueda

Localhost Sublime text

Cambiar Color de Tema (Color Scheme)

es el color de la ventana que deseemos personalizar.

Cuando ingresamos al Install Package Control (Ctrl + SHIFT + P), luego digitamos Select Color y elegimos

seleccionar color tema sublime

Luego aparecerá la siguiente ventana, donde bastará con elegir la opción que deseemos y cambiará el color

theme mariana sublime text

Creando documento HTML

Vamos a crear un nuevo documento, presionamos CTRL +N 

documento nuevo sublime text 3

Ahora procedemos a guardar presionando CTRL + S y añadimos el nombre de archivo y extensión

guardando documento html

la vista del documento guardado sería

documento guardado html sublime text 3

de la mísma manera procedemos a guardar un documento CSS dentro de una carpeta CSS

Ahora procedemos a abrir la carpeta raiz, Nos vamos a File / Open Folder y buscamos nuestra carpeta principal

Abrir carpeta sublime text 3

La vista sería

Vista sitio web

Podemos distribuir la vista en paralelo para manejar varios archivos, para esto nos vamos a View / Layout / Columns:2, tambien podempos presionar la combinación de teclas ALT + SHIFT + 2

columnas sublime text

Ahora simplemente arrastramos cada archivo a una columna, la vista sería

vista columnas sublime text 3

Para ver en el navegador presionamos click derecho y luego Open in Browser

ver en navegador sublime text 3