DÍA 8 / 2014

Cómo crear un plugin en Sublime Text

En este artículo vamos a ver como crear un plugin en Sublime Text. Para desarrollar un plugin necesitas conocimientos básicos de programación y también del lenguaje Python y por supuesto una idea, algo que tú creas que necesitas para ti o bien que puede serle de utilidad a la comunidad de usuarios de este potente editor.


Antes de empezar quiero dejar claro que no soy ninguna experta creando plugins para Sublime Text, por lo que espero poder explicarte todo utilizando un lenguaje sencillo y sobre todo correctamente, aún así agradecería mucho que si detectas algún error a lo largo de este artículo, me lo comentes e intentaré solucionarlo con la mayor brevedad posible 🙂

Aquellas personas que aún no están familiarizadas con ST2 o ST3 les recomiendo que primero se familiaricen con el entorno, ya que de buenas a primeras puede parecer algo complicado, por lo que en este curso de Sublime Text obtendrán los conocimientos básicos y necesarios para poder seguir con facilidad este tutorial. ¡Comencemos!

Crear nuevo plugin

Para crear un plugin primero nos dirigimos a la opción "Herramientas" y posteriormente seleccionaremos "Nuevo Plugin". Se abrirá un nuevo documento que nos mostrará el siguiente código:

import sublime, sublime_plugin

class ExampleCommand(sublime_plugin.TextCommand):
def run(self, edit):
self.view.insert(edit, 0, "Hello, World!")

Para que comprendas los siguientes pasos de este tutorial al 100% cambia el nombre de la "class" en lugar de ExampleCommand le llamaremos SaludaCommand, luego verás el porqué de esto. Es decir ha de quedar así:

import sublime, sublime_plugin

class saludaCommand(sublime_plugin.TextCommand):
def run(self, edit):
self.view.insert(edit, 0, "Hola, Mundo!")

Guardar el plugin

Ahora necesitaremos guardar el nuevo plugin, para ello deberás realizar los siguientes pasos:
1. Crea una nueva carpeta con el nombre que le vas a asignar a tu plugin, por ejemplo "HolaMundo".
2. Guarda el plugin con un nombre descriptivo, en este caso yo le he llamado "holaMundo.py" (muy descriptivo :P) dentro de esa carpeta.

La ruta donde debes crear la carpeta es:
(OSX): Users\"Nombre de usuario"\Library\Application Support\Sublime Text 3\Packages
(Win7): C:\Users\"Nombre de usuario"\AppData\Roaming\Sublime Text 3\Packages

De forma que tu plugin estará guardado en:
(OSX): Users\"Nombre de usuario"\Library\Application Support\Sublime Text 3\Packages\HolaMundo\holaMundo.py
(Win7): C:\Users\"Nombre de usuario"\AppData\Roaming\Sublime Text 3\Packages\HolaMundo\holaMundo.py

Recuerda: El nuevo plugin deberá tener la extensión .py y estar guardado en esa ubicación, sino no te funcionará. Y ¿Por que lo de crear una carpeta? para tener tu plugin con el resto de plugins ordenados ya que ST creará un nuevo archivo con extensión .pyc

Consola de errores

Si tienes algún error en el código, el ST te los mostrará en la consola.
Por ejemplo, prueba a eliminar las últimas comillas de "Hola mundo" y volver a guardar el archivo, verás como en la consola (View > Show Console) ST te mostrará el siguiente mensaje:

Traceback (most recent call last):
File "./sublime_plugin.py", line 62, in reload_plugin
File "./miPrimerPlugin.py", line 5
self.view.insert(edit, 0,  "Hola, Mundo!)
^
SyntaxError: EOL while scanning string literal

Por lo que no hace falta que te diga que es MUY recomendable que mantengas la consola abierta mientras programas un plugin 🙂

Ejecutar el plugin

Crea un nuevo archivo (File > New File) y en la consola de ST escribe la siguiente línea:

view.run_command('saluda')

Pulsa Intro y verás que se insertará la frase "Hola, Mundo!" al comienzo de tu nuevo archivo. ¡Enhorabuena acabas de ejecutar tu primer plugin!

Te habrás dado cuenta que ST automáticamente al indicarle el nombre de la class "saluda" ha ejecutado el plugin, es decir a pesar de que el nombre de la clase es "saludaCommand", sólo debemos indicar la primer parte de nuestra class.

Prueba a cambiar el nombre de la class por ejemplo a: saludaAlMundoCommand, guarda el plugin e intenta ejecutar el comando de la siguiente manera:

view.run_command('saludaAlMundo')

¡Vaya no ocurre nada! Esto es porque al tener mayúsculas en el nombre de la clase Sublime Text transforma las mayúsculas en minúsculas y antepone un guión bajo. Prueba ahora a ejecutar el siguiente comando en la consola:

view.run_command('saluda_al_mundo')

¡Ahora ha funcionado! 😀

Crear entrada en el menú y asignar tecla rápida

Ahora que ya tenemos nuestro plugin creado es hora de asignarle una entrada en el menú principal. Por lo que tendremos que decidir donde queremos insertar el plugin. Tenemos las siguientes tres posibilidades:

Main.sublime-menu: barra de menú principal de ST.
Side Bar.sublime-menu: hace referencia a la barra lateral.
Context.sublime-menu: es el menú contextual, cuando haces click derecho del ratón sobre un archivo abierto.

Para agregar una entrada sólo tienes que añadir el siguiente texto en un archivo y guárdarlo en la misma carpeta donde has guardado tu plugin. Por ejemplo:

[
{
"id" : "saluda",
"caption" : "Mi Plugin",
"command" : "saluda"
}
]

Al igual que sucede con los Snippets, ha de tener un formato JSON válido. Así que si por error eliminas el último cierre "]" ST te indicará en qué línea se encuentra el error y no podrás guardar el archivo.
Vamos a ver para que es cada una de las instrucciones anteriores:

"Id": es un identificador de menú básico
"Caption": hace referencia al nombre que tendrá en el menú del programa
"Command": es el comando a ejecutar

Vamos a hacer algo más divertido y profesional, añadamos un submenú mediante de la siguiente forma:

[
{
"id" : "saluda",
"caption": "Mi Plugin",
"children":
[
{
"caption" : "Ejecuta el Plugin",
"command" : "saluda"
}
]
}
]

En este punto, ya no solo sabes como crear un nuevo plugin en Sublime sino que además tienes una nueva entrada en el menú con tu plugin! 😀

Ahora vamos a asignarle una tecla rápida (atajo de teclado), es similar a introducir una entrada en el menú, pero con la pequeña diferencia de que dependiendo del sistema operativo que utilices variará el nombre del archivo:

Default (Windows).sublime-keymap
Default (OSX).sublime-keymap
Default (Linux).sublime-keymap

Si estás creando el plugin para tu uso personal, con que crees un único archivo para tu sistema operativo es suficiente, pero si piensas distribuir el plugin, lo mejor será que crees los tres archivos.

Recuerda que no deberías asignarle una tecla rápida que ya esté en uso. Para comprobar cuales se están utilizando no tienes más que acceder a:

(OSX): “Sublime Text” >  “Preferences” > “Key Bindings – Default”
(Windows): “Preferences” > “Key Bindings – Default"

También sería recomendable que comprobaras que ningún otro plugin que tengas instalado esté haciendo uso de tu tecla rápida, para así evitar conflictos. Una vez que hayas decidido tu combinación de teclas, por ejemplo:

[
{
"keys": ["super+shift+x"],
"command": "saluda"
}
]

Guarda el/los archivo/s en el mismo lugar donde se encuentra el plugin y listo.
En el caso anterior como puedes ver la tecla "super" hace referencia la tecla Command (Cmd) en Mac.

Conclusión final

Ahora que ya sabes como crear un plugin en Sublime Text, añadirle una combinación de tecla rápida para ejecutar el plugin y además incluso has aprendido a crear una nueva entrada en el menú, ahora sólo te queda ponerte manos a la obra y compartir tus plugins con la gran comunidad de seguidores de este potente editor. ¡Hasta otra! 🙂

Roxana Falasco

Emprendedora, bloguera profesional y experta en desarrollo web FrontEnd. Propietaria de sitios webs de temáticas nicho y de varios videocursos online. He trabajado para las más importantes e-commerce de Barcelona. En 2014 dejé mi trabajo como Responsable de Desarrollo Web FrontEnd para dedicarme 100% a mis negocios online. En la actualidad me dedico a producir, crear y publicar sitios webs y cursos online. Entre mis aficiones se encuentran: desarrollar sitios webs y video-cursos, leer libros de desarrollo personal y finanzas, viajar, la fotografía y los videojuegos.