Este blog es la continuación y cuarta parte de la serie acerca de desarrollo, hoy hablaré de la personalización del, para mí, mejor Editor de Texto. Existen varias formas de personalizar este genial editor para adecuarse al uso que le vamos a dar, hoy hablaremos de los Snippets y del paquete para administrarlos: Package Resource Viewer.

SNIPPETS:

"Los ordenadores te enseñan algo importante, y es que no tiene sentido recordarlo todo. Lo importante es ser capaz de encontrar cosas." Douglas Coupland, escritor de ficción canadiense.

Ya sea que esté codificando o escribiendo, es probable que necesite ciertos Snippets cortos de texto una y otra vez. Para eso están los Snippets, para ahorrarse la tediosa escritura, los Snippets son plantillas inteligentes que insertarán texto y lo adaptarán a su contexto.

Para crear un nuevo Snippet, seleccione Tools => Developer => New Snippet y Sublime Text le presentará un archivo de tipo XML con extensión .sublime-snippet, con esta estructura:

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- <tabTrigger>hello</tabTrigger> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>

Pero esta no es la estructura completa de un Snippet, en su documentación, Sublime Text nos comparte la estructura completa:

<snippet>
  <content><![CDATA[Type your snippet here]]></content>
  <!-- Optional: Tab trigger to activate the snippet -->
  <tabTrigger>xyzzy</tabTrigger>
  <!-- Optional: Scope the tab trigger will be active in -->
  <scope>source.python</scope>
  <!-- Optional: Description to show in the menu -->
  <description>My Fancy Snippet</description>
</snippet>

En donde 

• content: En esta etiqueta se inserta el Snippet. Los Snippets pueden variar desde plantillas simples hasta bastante complejas. Tenga en cuenta lo siguiente al crear uno: Si desea obtener un $ literal, debe escapar de esta manera: \$ y que el contenido debe incluirse en una sección  <![CDATA[...]]> ya que los Snippet no funcionarán si no lo hace.
• tabTrigger: Define la secuencia de teclas que se deben presionar para insertar este Snippet. Después de escribir esta secuencia, el Snippet se activará tan pronto como presione la tecla Tab.
• scope: Scope determina el contexto en el que estará activo el fragmento. Consulte aquí para obtener más información.
• description: Se usa cuando se muestra el Snippet en el menú. Si no está presente, Sublime Text toma por defecto el nombre de archivo del fragmento.
  

Los Snippets tienen acceso a información contextual en forma de variables de entorno. Sublime Text establece automáticamente los valores de las variables enumeradas en este enlace.

Además, Sublime nos facilita la inserción de datos gracias a los Fields (Campos), que se utilizan para guiarlo a través de la personalización de un Snippet después de haberlo insertado. Con la ayuda de marcadores de campo, puede recorrer las posiciones dentro del Snippet presionando la tecla Tab, los campos tienen esta forma $1. Al expandir un poco la sintaxis del campo, puede definir valores predeterminados para estos, para ello se utilizan los Placeholder, de esta forma será mucho más intuitivo de manejar, los Placeholder tienen esta forma ${1:Placeholder}.

Aquí les comparto un Snippet que desarrollé para el lenguaje de programación Javascript, para facilitar el uso de console.log(), explicado más adelante en el video de este blog.

<snippet>
  <content><![CDATA[console.log($0);]]></content>
  <tabTrigger>log</tabTrigger>
  <scope>source.js</scope>
  <description>Console Log</description>
</snippet>

Complemento para ayudar a ver y editar los recursos de los paquetes de Sublime Text 2 y Sublime Text 3. En este video detallo el uso de este paquete y cómo, gracias a este, podremos modificar los Snippets por defecto de cada lengauge de programación que nos brinda Sublime Text.

Tercera parte de esta serie de Blogs.

Quinta parte de esta serie de Blogs.