Sublime Text 3 - Instalando PC, 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.

Indice

Sublime Text 3

Podéis descargar el editor y ver su changelog entero aquí. 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 Control

La forma mas rápida de instalar el Package Control es ir a su sitio oficial, copiar el código y pegarlo en la consola de Sublime.

Para abrir la consola basta con ir al menú View y elegir Show Console. Una vez instalado, hay que reiniciar Sublime. Para abrir el menú, como siempre Ctrl + Shift + P.


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. De todos modos, desde hace algunas builds, ST por defecto no tiene el Settigs - Default como read-only.

font-face - Para fuente yo suelo utilizar Source Code Pro que es una fuente open-source y gratuita de Adobe. No es pesada para los ojos y diferencia claramente los caracteres. Para descargar la fuente, pueden visitar su Github.

"font_face": "Source Code Pro Medium",
"font_options": ["bold"],
"font_size": 8.3,

color-scheme y theme - Aunque el color scheme por defecto (Monokai) no esta nada mal, yo prefiero unos colores mas apagados. Mi color scheme favorito ahora mismo es el Dracula que se puede descargar desde el propio Package Control. De tema utilizo el famoso Soda en su versión dark. También hay otros muy interesantes como Fox que imita el diseño del Firefox Developer Edition.

"theme": "Soda Dark 3.sublime-theme",
"color_scheme": "Packages/Dracula Color Scheme/Dracula.tmTheme",

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. fadefoldbuttons escodendera esos triángulos hasta que no pases el cursor por encima. A mi personalmente no me agrada así que suelo dejarlo activado y visible todo el tiempo.

"fold_buttons": true,
"fade_fold_buttons": false,

tab_size, translate_tabs_to_spaces y use_tab_stops - Personalmente no me gustan los tabs (el margen que se crea al indentar), este tema esta muy discutido y para gustos, colores, pero yo por lo menos prefiero espacios (4).

"tab_size": 4,
"translate_tabs_to_spaces": true,
"use_tab_stops": true,

highlight_line y highlight_modified_tabs - Estas opciones “marcaran” la linea en la que estamos actualmente y si el tab has sido modificado pero no guardado. Algo bastante útil =).

"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...

"always_show_minimap_viewport": true,
"draw_minimap_border": false,

Estas son las cosas mas básicas aunque siempre hay algunos detalles. Yo suelo tener mi config en Git para que pueda clonarlo cada vez que me haga falta sin tener que re-configurar todo.


Extensiones

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

- ApacheConf.tmLanguage (link)

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ú.

- Emmet (link)

Como siempre, un plugin indispensable para cualquiera que aprecie su tiempo y su workflow. Emmet convierte sintaxis cortas en largas. Un simple ejemplo podría ser escribir:

ul>li*5

Pulsar {tab} y ver el resultado.

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

En este enlace, podéis encontrar un cheatsheet muy bueno explicando en detalle los shortcuts.

- ColorPicker (link)

En la versión 2 y a principios de la versión 3 había varios plugins para facilitar la tarea de escoger un color. Ahora mismo hay solo uno y se llama ColorPicker. Su función es bastante sencilla, te permite seleccionar un color de manera gráfica usando el “color-picker” del sistema. En GNU/Linux esta algo buggeado ya que no te permite enfocar la ventana de Sublime mientras esta abierto, pero hace su trabajo.

- HTMLAtributes (link)

Completado automático para atributos de HTML/HTML5. La verdad no hay mucho que decir.. es un pequeño complemento para acelerar nuestro workflow.

- HTML5 (link)

Añade soporte de sintaxis para HTML5 (colorear) y varios snippets.

- +Nettuts Fetch (link)

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, CTRL + SHIFT + P y elegir Fetch: Manage. Desde ahí se pueden configurar los archivos y sus accesos directos.

- jQuery Snippets Pack (link)

Muy útil para los que trabajamos con jQuery. Añade unos cuantos snippets. Por ejemplo al escribir $ready y pulsar {TAB}. Se convertirá automáticamente en:

$(function () { });

- DocBlockr (link)

Simplifica la tarea de documentar (mediante comentarios) el codigo. Actualmente tiene soporte para JavaScript, PHP, CoffeeScript, ActionScript y C/C++.

- AutoFileName (link)

Auto-completado para archivos. Muy útil para no distraerse buscando las rutas de los archivos y sus respectivos nombres.


Tips y Workflow

Algunos trucos y consejos para mejorar el workflow.

- Ir a linea - Al pulsar Alt + G y escribir un numero, ST nos llevara directamente a la linea que le hemos indicado.

- Navegar/Editar archivos - Usando Ctrl + P ST nos mostrara una lista de archivos. Podemos navegar por directorios escribiendo rutas relativas y pulsar Enter para abrir el archivo seleccionado.

- Ir a un metodo - Si pulsamos Ctrl + R, podemos indicarle a ST un nombre de metodo/id para que nos lleve directamente a el.

- Ocultar/Mostrar la barra de menú y barra literal - Muy útil para una vista minimalista, podemos hacer toggle a la barra del menú y a la barra lateral indicando un par de Key Bindigs.

Ir a: Preferences, Key Bindings - User y añadir las siguientes lineas.

{ "keys": ["f12"], "command": "toggle_menu"},
{ "keys": ["ctrl+b"], "command": "toggle_side_bar"},

Ahora, con F12 podremos Ocultar/Mostrar la barra del menú y con Ctrl + B la barra lateral.

Saludos

[arriba]

comments powered byDisqus