Instalar Sublime Text 3.0 en Windows
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.
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
Tabla de contenido:
Instalando Sublime Text 3
Cuando ejecutamos la descarga la primera ventana que se presenta es la siguiente, click en Next
Luego aparecerá la siguiente ventana donde nos muestra la ruta donde se instalará el programa, presionamos el botón Next
Luego, en la siguiente ventana podemos elegir si insertamos el acceso del programa en la barra de menú de nuestro Sistema Operativo
Luego la siguiente captura para validar la instalación, click en Install
Para finalizar la instalación click en Finish
Packages en Sublime
Cuando instalamos el Sublime Text 3 y ejecutamos se mostrará la siguiente ventana
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
escribimos package Control y seleccionamos Package Control: Install Package
Método 2
En nuestro Sublime Text 3 instalado, nos vamos a View / Show console
aparecerá lo siguiente
Ahora ingresamos a la Web packagecontrol.io, aparecerá la siguiente ventana
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
Paquete Emmet
El package Emmet me permite autocompletar codigo HTML, para instalarlo primero debemos de ingresar al instalador de paquetes (CTRL + SHIFT + P), seleccionamos
Luego en la siguiente ventana escribimos emmet y listo
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)
Aquí una muestra de como podemos usarlo presionando al final la tecla TAB:
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
entonces necesitaremos instalar el paquete Sublime Server, primero la combinación de teclas CTRL + SHIFT + P, luego escribimos browser y elegimos Browser Sync
Para Ejecutar el paquete nos vamos a Browser Sync
Notaremos que en el navegador que estemos trabajando se visualizará en la barra de búsqueda
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
Luego aparecerá la siguiente ventana, donde bastará con elegir la opción que deseemos y cambiará el color
Creando documento HTML
Vamos a crear un nuevo documento, presionamos CTRL +N
Ahora procedemos a guardar presionando CTRL + S y añadimos el nombre de archivo y extensión
la vista del documento guardado sería
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
La vista sería
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
Ahora simplemente arrastramos cada archivo a una columna, la vista sería
Para ver en el navegador presionamos click derecho y luego Open in Browser
