Sublime Text 3 - Instalando PM, configuración, extensiones y tips.

Bueno, pues desde la build 3047, Sublime Text 3 beta esta disponible también para los usuarios que no tienen licencia de uso. La única limitación parce ser que al guardar el documento 5 veces, se te mostrara una alerta y luego ya no volverá a aparecer... (según he probado) así que se puede decir que no hay problema con eso.

En general, se han ido añadiendo muchas novedades de las cuales la mas populares parecen ser el inicio mas rápido, el GOTO DEFINITION y varias mejoras en la velocidad a la hora de reemplazar en documentos grandes.

Sublime Text 3


Podéis descargar el programa y ver su changelog entero aquí: http://www.sublimetext.com/3

Como siempre, recomiendo descargar la versión portable ya que esta utiliza su propio directorio para instalar los paquetes/extensiones y configuraciones. Así, todo se mantiene mucho mas organizado.

Instalado el Package Manager

Al igual que he mencionado en el post anterior, la única manera (por ahora) sigue siendo la instalación por GIT.

Para el que no sepa que es GIT o no sabe manejarlo, hay un manual buenisimo en español y gratuito en el siguente enlace: Git - Book
cd Sublime Text 3/Data/Packages
git clone https://github.com/wbond/sublime_package_control.git "Package Control"

Una vez hecho esto y reiniciado Sublime Text 3, podemos instalar con la combinación de siempre: {Ctrl} + {P} > install > {ENTER}.

Configuración

Quizás una de las cosas mas importantes es la configuración. A mi personalmente la que viene por defecto no me agrada demasiado así que os dejare mas o menos la que uso y su descripción. Por supuesto, para gustos los colores.

Para abrir la configuración hay que ir a Preferences -> Settings - Default. Sin embargo, recomiendo que los cambios se hagan en Settings - User, pues así se mantendrán incluso aunque ST se actualice o algo cambie.

font-face - Esta solo se puede cambiar desde Settings - User ya que hay un archivo aparte en la carpeta de Sublime Text 3/2 que sobre-escribe el default. Para fuente yo suelo utilizar la Source Code Pro de Adobe. Es una fuente gratuita que podéis encontrar en el siguiente link: http://blogs.adobe.com/typblography/2012/09/source-code-pro.html
"font_face": "Source Code Pro semibold",


color-scheme - Aunque el color scheme por defecto (Monokai) no esta nada mal, yo prefiero los del paquete Dayle Rees Color Schemes que podéis instalar escribiendo "Dayle" en el package manager. Personalmente como tema oscuro utilizo TronLegacy.
"color_scheme": "Packages/Dayle Rees Color Schemes/TronLegacy.tmTheme",


theme - Me encanta SODA.. es un tema que me mueve por todos lados. Para instalarlo no hace falta nada mas que escribir Soda en el package-manager y sera el primer resultado. Podeis elegir entre Soda Light y Soda Dark una vez instado.
"theme": "Soda Dark.sublime-theme",

Existe otro tema muy bueno y compatible con Sublime Text 3 llamado Fatland. Se puede descargar de la misma manera que SODA (desde el package manager).

fold-buttons y fade_fold_buttons Fold buttons es un triangulo pequeño que te permite "esconder" parte del código para centrarte en otra cosa. Es una opción muy popular en los IDE's y yo la recomiendo bastante. fade_fold_buttons escodendera esos triángulos hasta que no pases el cursor por encima. Ami personalmente no me agrada así que fold-buttons: true, fade_fold_buttons: false,
"fold_buttons": true,
"fade_fold_buttons": false,

tab_size, translate_tabs_to_spacesy y use_tab_stops - Personalmente no me gustan los tabs (el margen que se crea al indentar) tal y como están, los prefiero pequeños (3) y que se conviertan en espacios. Por tanto:
"tab_size": 3,
"translate_tabs_to_spaces": true,
"use_tab_stops": false,

enable_telemetry - Telemetry enviara datos "anonimamente" a los creadores de ST para analizar/mejorar/reparar cosas. Puesto que se trata de una beta es posible que el programa tenga bugs y no es una mala opción. Yo la tengo en false puesto que la beta parece ser bastante madura y por ahora he tenido apenas un par de errores indirectos (plugins) por tanto no creo que haga falta.
"enable_telemetry": flase,

highlight_line y highlight_modified_tabs - Estas opciones "marcaran" la linea en la que estamos actualmente y si el archivo ha sido modificado pero no guardado. Son una opción indispensable para mi :).
"highlight_line": true,
"highlight_modified_tabs": true,

always_show_minimap_viewport y draw_minimap_border - El viewport es el cuadrado en el minimapa que mas o menos nos indica donde estamos. Por defecto aparece solo cuando pasamos el cursor por encima.. pero por supuesto podemos forzarle. Draw minimap border es el borde que se dibuja alrededor del mapa... ami no me gusta así que lo tengo desactivado.
"always_show_minimap_viewport": true,
"draw_minimap_border": false,


Extensiones

Bien, llegamos a la parte divertida. Por supuesto, estas "extensiones" siempre se pueden instalar desde el Administrador de paquetes (package manager) pulsado {CTRL} + {Shift} + {P}, escribiendo install {ENTER}, el nombre de la extensión y {ENTER}.

ApacheConf.tmLanguage

Para los que usamos Apache y nos toca lidiar con sus archivos de configuración esta extensión es perfecta pues añade soporte para colorear lineas. Una vez instalado se puede seleccionar desde el seleccionador de sintaxis o escribiendo ss apache en el menú que se abre al pulsar ctrl + shift + p.

Emmet

Como siempre, un plugin indispensable para cualquiera que aprecie su tiempo y su workflow. Emmet convierte sitaxis cortas en largas. Un simple ejemplo podria ser escribir:
ul>li*5
Pulsar {TAB} y ver el resultado:
<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

En el siguiente enlace, podéis encontrar un cheatsheet muy bueno explicando en detalle los shortcuts. Emmet - Cheat Sheet

ColorPicker

Hay varios que se llaman así, el que nos interesa es el que dice ser multiplataforma en su descripción. El plugin esta algo buggeado, al ejecutarlo (Ctrl + Shift + C) su ventana no obtendrá focus automático (no se pondrá a la vista) y Sublime Text 3 se quedara sin responder hasta que no seleccionemos el color y demos aceptar. Sin embargo sigue siendo la única alternativa para Windows pues los demás según he visto están hechos para Mac OSX.

HTMLAtributes

Completado automatico para atributos de HTML/HTML5. La idea es escribir la palabra clave dar a {TAB} y que se complete. Ejemplo:
<input type="checkbox" chec
Al pulsar {TAB} se convierte en:
<input type="checkbox" checked=""

HTML5

Añade soporte de sintaxis para HTML5 (colorear) y varios snippets (html5 {TAB}).

+Nettuts Fetch

Este plugin sirve para obtener el contenido de archivos remotos (e incluso proyectos enteros). Es muy útil por ejemplo para cuando queramos descargar jQuery o algún archivo CSS. Una vez instalado, pulsad {CTRL} + {SHIFT} + {P}, escribid Fetch: Manage y dadle a {ENTER}. Desde ahí se pueden configurar los archivos y sus accesos directos.

jQuery Snippets Pack

Muy útil para los que trabajamos con jQuery. Añade unos cuantos snippets. El mas famoso por ejemplo es al escribir $ready y pulsar {TAB}. Se convertirá automáticamente en:
$(function () { });

SideBarEnhacements

Uno de los mas útiles pues añade muchísimas funcionalidades a la barra de archivos de Sublime Text 3.

Tips y Workflow


Estos son algunos trucos/tips y maneras de acortar el tiempo que gastamos en distracciones.

Ir a linea

Al pulsar {Ctrl} + {G} y escribir un numero, ST nos llevara directamente al numero de linea que le hemos indicado.

Abrir/Navegar por archivos sin la barra lateral

Al pulsar {Ctrl} + {P}, ST nos mostrara una lista de archivos. Podemos navegar por directorios escribiendo rutas relativas y al pulsar {Enter} se abrirá automáticamente el archivo.

Ir directo a un metodo/tag

Si pulsamos {Ctrl} + {R} podremos indicarle a ST un nombre de un metodo/id para que nos lleve directamente a el. Ejemplo: Si tenemos un div con ID "holamundo", si pulsamos {Ctrl} + {R} y escribimos holamundo este nos llevara directamente a donde esta posicionado. Sirve perfectamente funciones en PHP.

Reemplazar

{Ctrl} + {H} abrirá la ventana de buscar y reemplazar sin la necesidad de viajar por el menu.

Ocultar/Mostrar la barra de menu y la barra lateral.

Muy util para una vista minimalista, podemos hacer toggle a la barra del menu y a la barra lateral indicando un par de Key Bindigs.

Navegar por: Preferences - Key Bindings - User y añadir las siguentes lineas.
{ "keys": ["f12"], "command": "toggle_menu"},
{ "keys": ["ctrl+b"], "command": "toggle_side_bar"},

Ahora, con {F12} podremos Ocultar/Mostrar la barra del menu y con {Ctrl} + {B} la barra lateral.

Bueno, hasta aquí llega este post. Espero que os haya servido.
Saludos

Comentarios

Entradas populares de este blog