Sublime Text: Plugins y Configuraciones

blog tutorial sublime

ACTUALIZACIÓN: Ahora uso Visual Studio Code, te invitó a ver mi artículo de extensiones, configuración y personalización.

Visual Studio Code: Extensiones, configuración y personalización
Continuando con VS Code, en el artículo anterior te mencionaba 66 atajos deteclado [/blog/vscode-atajos/] que te podrían facilitar el día a día y hacertemucho más productivo. Hoy, en este artículo te quiero hablar sobre lasconfiguraciones y extensiones que tengo en mi editor. ContenidoConfigurac…
Fili SantillánFili Santillán

Continuando con el tema de Sublime Text, en el artículo anterior hablaba sobre los atajos de teclado que normalmente uso y de como podrían hacernos la vida más fácil y productiva. Hoy en este artículo me gustaría hablar de las configuraciones que tengo y los plugins que uso.

Índice:

  • Configuraciones

    • Dibujar un espacio en blanco
    • Opciones de la guía de indentación
    • Abrir archivos en una nueva ventana

  • Plugins

    • Package Control
    • Emmet
    • BracketHighLighter
    • Color HighLighter
    • ColorPicker
    • SideBarEnhancements
    • Temas y Sintaxis

Configuraciones

Sublime trae consigo muchas configuraciones por default, las cuales podemos cambiar dependiendo nuestras preferencias o necesidades.

Para ver todas las configuraciones, solo basta con tener el editor abierto e ir a Preferences > Settings - Default. Aparte de traer todas esas configuraciones también vamos a ver una especie de guía que nos da información acerca de las configuraciones y de los valores que podemos cambiar.

Para cambiar dichas configuraciones tenemos que ir a Preferences > Settings - User e ir agregando las que queremos cambiar, puede que ya tengamos algunas configuraciones ahí, así que hay que ser cuidadosos al agregar una nueva.

Yo no suelo ser muy estricto con las configuraciones que tiene por default Sublime Text, pero hay tres en especial que me han ayudado bastante y que hoy quiero compartir contigo.

Dibujar un espacio en blanco

Draw White Space

Esta configuración como su nombre lo dice, dibuja un espacio en blanco horizontal, lo que vendría siendo los espacios o tabulaciones que hacemos en nuestro código.

Por default esta configuración tiene el valor de "selection", esto quiere decir que solo seleccionando el texto podríamos ver esos espacios o tabulaciones.

A mi en lo personal me gusta ver siempre los espacios que tengo o las tabulaciones que hago, por ello el valor que uso es "all".

Para cambiarlo solo basta con ir a Preferences > Settings - User y agregar dicha configuración:

"draw_white_space": "all"

Ahora siempre tendremos visibles los espacios y tabulaciones.

Nota: Solo tenemos dos valores con está configuración: "selection" y "all".

Opciones de la guía de indentación

Indent guide options

Esta configuración nos va a permitir cambiar la forma en que vemos la indentación (vertical), por default tenemos que la indentación se vea siempre dibujada, yo la tengo de forma que se vea siempre que este activa, es decir, siempre que yo este en cierta línea, esta se va a ver más iluminada que las otras.

Para cambiar esta configuración, agregamos la siguiente línea con el siguiente valor:

"indent_guide_options":["draw_active"]

Ahora la línea de indentación se va a iluminar dependiendo de donde estemos posicionados.

Nota: Solo tenemos dos valores con está configuración: "draw_normal" y "draw_active"

Abrir archivos en una nueva ventana

Open files in new window

Esta configuración solo esta disponible para OS X (Mac), y por default lo que hace es abrir una nueva ventana al abrir archivos desde el finder o arrastrando al icono del dock.

Para mí esto resulta algo verdaderamente molesto, es por eso por lo que esta configuración la tengo desactivada, de esta forma ahora se abrirá una nueva pestaña en ves de una nueva ventana.

Para cambiar dicha configuración, solo agregamos la siguiente línea con el valor "false":

"open_files_in_new_window": false

Nota: Solo tenemos dos valores con está configuración: "true" y "false"

Como un dato extra, recuerda que estás configuraciones deben de estar dentro de la llave de apertura y cierre {}, al igual que separadas por comas (excepto la última).

Algo así:

{
    "draw_white_space": "all",
    "indent_guide_options":["draw_active"],
    "open_files_in_new_window": false
}

Como mencione anteriormente, no suelo ser muy exigente con la configuración que ya trae Sublime Text, pero puede que tú si lo seas, así que te invito a que veas estas configuraciones y hagas los cambios dependiendo tus necesidades.

Plugins

A pesar de que Sublime Text ya viene con un montón de características que ayudan con nuestro código, siempre habrá personas que lo hagan aún más genial y poderoso, por eso tenemos los plugins, los cuales agregan aún más opciones a este editor.

Package Control

Para poder instalar, actualizar y eliminar plugins, necesitamos de package control, el gestor de paquetes de Sublime Text.

Su instalación es muy fácil, solo hay que abrir la consola View > Show Console y pegar el siguiente código:

Sublime Text 3

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Sublime Text 2

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Una vez hecho esto damos enter, esperamos a que termine la instalación y reiniciamos Sublime (Cerrarlo y volverlo a abrir), ¡ahora ya podemos instalar plugins! :D.

Para instalar un plugin solo tenemos que abrir la paleta de comandos:

Windows & Linux:
Ctrl + Shift + P

Mac:
⌘ + Shift + P

Poner "install" y seleccionar la opción de "install package"

Vamos a tener una lista de plugins o paquetes que podemos instalar.

Ahora es el momento en el que te muestre los plugins que yo normalmente uso y que me han hecho la vida mucho más sencilla a la hora de codear.

Emmet

Empezamos con uno de los plugins más famosos y usados en varios editores de texto. Emmet es un kit de herramientas para mejorar el flujo de trabajo de HTML y CSS.

Para instalarlo solo hay que abrir la paleta de comandos, seleccionar la opción de "install package" y buscar emmet, seleccionarlo, instalarlo y reiniciar.

Empecemos con un ejemplo sencillo en HTML. Vamos a asignar una clase llamada ejemplo al elemento header:

header.ejemplo

Al tener esto solo hay que dar tab y automáticamente tendremos lo siguiente:

<header class="header"></header>

Así es como funciona emmet, simplifica el uso de un lenguaje para que seamos mucho más productivos.

Te recomiendo que leas la documentación que tiene emmet, ya que este plugin es muy grande y le puedes sacar bastante provecho.

BracketHighLighter

Este plugin es más sencillo, pero bastante útil, y lo que va a hacer es resaltar la apertura y cierre de alguna etiqueta, llave, corchete, comillas, etc.

!

Es plugin que me ha ayudado bastante para tener un orden en mi código cuando este se vuelve más grande.

Para instalarlo solo hay que abrir la paleta de comandos, seleccionar la opción de "install package" y buscar BracketHighLighter, seleccionarlo, instalarlo y reiniciar.

Color HighLighter

Es un plugin muy útil si trabajamos con CSS, ya que nos da una vista previa a algún color que este en hexadecimal. También cuenta con soporte para variables en Less, Sass y Stylus.

Para instalarlo solo hay que abrir la paleta de comandos, seleccionar la opción de "install package" y buscar Color HighLighter, seleccionarlo, instalarlo y reiniciar.

Podemos cambiar las configuraciones de este plugin en Tools > Color HighLighter.

ColorPicker

Este plugin va muy bien con Color HighLighter ya que nos permite abrir la paleta de colores para elegir el color de nuestra preferencia y que automáticamente se convierta en hexadecimal.

El comando para usar ColorPicker es:

Windows & Linux:
Ctrl + Shift + C

Mac:
⌘ + Shift + C

Para instalarlo solo hay que abrir la paleta de comandos, seleccionar la opción de "install package" y buscar Colorpicker, seleccionarlo, instalarlo y reiniciar.

SideBarEnhancements

Solo funciona para Sublime Text 3

Este plugin proporciona mejoras en la barra lateral de archivos y carpetas de Sublime Text. Dándonos muchas más opciones dentro del editor, como eliminar o renombrar algún archivo (algo que no tenemos por defecto).

Para instalarlo solo hay que abrir la paleta de comandos, seleccionar la opción de "install package" y buscar SideBarEnhancements, seleccionarlo, instalarlo y reiniciar.

Temas y Sintaxis

Ya para finalizar me gustaría mencionar que aparte de plugins también podemos instalar temas o sintaxis, solo hay que hacer la búsqueda con la paleta de comandos.

Algunas sintaxis que puedes descargar son Stylus/handlebars/Jade/Sass. El tema que yo uso y me agrada bastante se llama Material Theme y se puede instalar de la misma manera.

Estos son los plugins que yo uso, pero con "package control" abres todo un mundo de posibilidades, existen plugins para todo tipo de proyectos y necesidades.

Te recomiendo que entres a la página de package control para que puedas ver los distintos plugins que existen.