Sei sulla pagina 1di 14

Tutorial completo

de instalación y configuración de
Sublime Text 3
Índice de
contenidos
1 Introducción
-
5 Instalación
-
Página 3 Página 9

2 ¿Qué es Sublime Text 3?


-
6 Utilidades y atajos
-
Página 5 Página 11

3 Características 7 Plugins
-
-
Página 7 Página 13
1 Introducción

En este tutorial hablaremos


de uno de los editores más
completos y utilizados del
mercado ahora mismo por los
que se dedican al desarrollo,
sobre todo al desarrollo web.
Hablamos de Sublime Text 3.
Repararemos en sus características, veremos como
instalarlo en diferentes entornos de trabajo así como
sus múltiples posibilidades para trabajar con él en
distintos ámbitos. También repasamos unos comandos
básicos que nos ayudarán a trabajar de forma más ágil
con este magnífico editor de texto.

Página 3
Tutorial completo
de instalación y configuración de
de Sublime Text 3
2 ¿Qué es
Sublime Text 3?
Sublime Text 3 es un editor de Está preparado para editar archivos de infinidad de
lenguajes, desde Go a Java pasando por Python, C,
texto multiplataforma escrito en etc… Aunque es comúnmente utilizado para desarrollo
C++ y basado en el clásico Vim. web, es decir, para la edición de ficheros HTML, CSS y
Javascript.
Aunque es gratuito y totalmente
funcional, no se trata de un
software de código abierto, sino
que te proporciona una licencia
perpetua para usarlo sin fin.

Página 5
Tutorial completo
de instalación y configuración de
de Sublime Text 3
3 Características

Las principales características que convierten en tan


interesante a este editor de texto son las siguientes:

• Soporta nativamente una gran cantidad de lenguajes


(hasta 43) así como el texto plano.

• Posee una funcionalidad de búsqueda dinámica con la


que se pueden llevar a cabo búsquedas por expresiones
regulares dentro de los archivos y proyectos.

• Tiene autocompletado de palabras y expresiones así


como marcado de llaves, lo que permite abrir bloques
de una manera muy ágil y sencilla.

• Instalación de plugins para ampliar su funcionalidad.

• Soporte de pestañas. Se pueden abrir tantos


documentos como se necesite en varias pestañas.

• Minimapa que permite previsualizar de forma general


el código escrito.

Página 7
Tutorial completo
de instalación y configuración de
de Sublime Text 3
4 Instalación

En este punto vamos a mostrar que tenemos que hacer Una vez instalado abrimos un terminal y ejecutamos el
para instalar Sublime Text 3 en nuestro ordenador de siguiente comando:
forma sencilla.
subl --version
Solo tenemos que irnos a la página oficial del programa:
http://www.sublimetext.com/ Si está instalado correctamente debería salirnos algo
parecido a lo siguiente:
En el menú de la parte superior tenemos la opción
Download. Pinchamos ahí. subl --version
Sublime Text Build 3476
Una vez en la pagina de descargar, solo tenemos que
elegir la opción que queramos, Windows o Mac.

En ambos casos se descargargará un archivo ejecutable


que tendremos que abrir y llevar a cabo la instalación.

En el caso de Linux, la instalación hay que llevarla a


cabo por consola. La opción más común es usando apt.
En ese caso, solo tendremos que ejecutar los siguientes
comandos. Sublime
wget -qO - https://download.sublimetext.
com/sublimehq-pub.gpg | sudo apt-key add

sudo apt-get install apt-transport-https

echo “deb https://download.sublimetext.


com/ apt/stable/” | sudo tee

/etc/apt/sources.list.d/sublime-text.
list
sudo apt-get update

sudo apt-get install sublime-text

Página 9
Tutorial completo
de instalación y configuración de
de Sublime Text 3
5 Utilidades
y atajos
Una de las principales cualidades de Sublime Text 3 es Pestañas y ventanas
que te permite trabajar de una manera muy cómoda con Cambio entre pestañas: Ctrl + 1,2,3… o Ctrl + Tab
los llamados workspaces o entornos de trabajo. Cuando Nueva pestaña: Ctrl + N
estamos trabajando en un proyecto nos gusta tener Nueva ventana: Ctrl + Shift + N
todo accesible fácil y rápidamente y eso no compatible
con tener que estar yendo al sistema de archivos cada Proyectos
vez que queremos abrir uno diferente. Por eso Sublime Abrir archivo: Ctrl + P
te permite abrir carpetas,en este caso donde tengas el Paleta de comandos: Ctrl + Shift + P
proyecto para trabajar con ello. Ver u ocultar barra lateral: Ctrl + KB
Salto de líneas: Ctrl + Shift + Enter
Para ello simplemente hay que irse al menú superior, Dividir el código en pestañas diferentes: Alt + Shift +
en la parte izquierda ala apartado File (o Archivo) y 1,2,3…
seleccionar la opción Open Folder… (o Abrir Carpeta). Selección
Una vez seleccionemos la carpeta de nuestro proyecto Seleccionar palabras: Ctrl + D
tendremos las subcarpetas y archivos accesibles en forma Seleccionar línea: Ctrl + L
de árbol en la parte izquierda de la pantalla facilitandonos Seleccionar todo: Ctrl + A
el trabajo. Seleccionar contenido dentro de dos llaves: Ctrl + Shift
+M
Otra cosa que nos hace la vida más fácil a la hora de Selección múltiple para tener varios punteros en varios
trabajar con una herramienta son sus atajos de teclado. sitios a la vez: Ctrl + click
Estos son los más interesantes que Sublime proporciona.
(Para Mac, Ctrl = ⌘) Búsquedas
Búsqueda simple: Ctrl + F
Búsqueda avanzada: Ctrl + Shift + F
Búsqueda de funciones en nuestro código: Ctrl + Shift
+R

Manipulación de texto
Texto en mayúsculas: Ctrl + KU
Texto en minúsculas: Ctrl + KL
Reemplazar texto: Ctrl + Shift + F

Indentación
Indentación múltiple: Tab
Indentación múltiple con retroceso: Ctrl + Tab

Página 11
Tutorial completo
de instalación y configuración de
de Sublime Text 3
6 Plugins

Para acabar con esta guía hablaremos de las posibilidades Ahora para finalizar enumeraremos unos cuantos plugins
que existen para ampliar la funcionalidad de Sublime que son bastante útiles para desarrolladores:
Text a través de plugins. Los plugin nos ayudan a añadir
funciones extra para poder cubrir nuestras necesidades. • Sidebar Enhancements: Amplía las opciones de gestión
de archivos de la barra lateral.
Para poder hacerlo, primero debemos instalar Package
Control. Para ello debemos seguir los siguientes pasos: • Color Highlighter: Permite ver los colores que elijamos
en las etiquetas CSS.
1. Vamos a la pagina oficial (https://packagecontrol.io/
installation), seleccionamos nuestra versión de Sublime • Bracket Highlighter: Resalta las etiquetas de apertura y
(en este caso la 3) y copiamos el código. cierre para mejorar la lectura de código.

2. Abrimos Sublime, pulsamos en View>Show console • SFTP: Actualiza los archivos en el servidor simplemente
con guardar el archivo.
3. Pegamos el código. Una vez hecho esto comenzará la
instalación. • LiveReload: Actualiza los cambios del archivo en el
navegador al guardarlo.

Una vez instalado el package control podremos instalar • DocBlockr: Permite insertar fácilmente comentarios
plugins siguiendo los siguientes pasos: para documentación con soporte para Php, Java, etc.

1. Hacemos click en Preferences>Package Control • jQuery: Nos da sugerencias de métodos al escribir


o pulsar Control + Shift + P código jQuery.

2. Escribimos install y seleccionamos la opción install • SublimeCodeIntel: Autocompleta el código y reconoce


package. las funciones de nuestro proyecto.

3. En el recuadro escribimos el nombre del plugin a • Alignment: Alinea y organiza todas las variables
instalar y a los pocos segundo estará listo. seleccionando y presionando Ctrl + Alt + a

4. Reiniciamos Sublime Text para que los cambios


funcionen correctamente.

Página 13
¿Quieres convertirte en
Frontend Developer Profesional?
Aprende ahora con los mejores expertos
CARRERA
FRONTEND DEVELOPER WEB

COMENZAR CARRERA AHORA

¡Si te ha resultado útil,


comparte en redes sociales!

Más en openwebinars.net