Cómo añadir snippets de código en Atom

No es ninguna coincidencia que Atom, el editor de código creado por Github, sea muy popular dentro de la comunidad del desarrollo web. No sólo es muy versátil gracias a sus miles de paquetes Atom y a su gran compatibilidad con multitud de lenguajes, sino que casi todas sus partes son personalizables por el usuario.

Aprovechando la característica Atom's Snippets, puedes hacer que tu trabajo a la hora de programar sea más productivo, ya que mediante la reutilización de snippets puedes reducir la parte repetitiva de tu trabajo. En este artículo, os voy a mostrar cómo puedes utilizar snippets de código en Atom, y incluso cómo crear tus propios snippets personalizados.

Usar los snippets incorporados

Por defecto, Atom viene con snippets incorporados, cada uno de los cuales está unido a un determinado tipo de archivo. Por ejemplo, si estás trabajando en un archivo con la extensión .js, sólo los snippets que pertenecen al ámbito de JavaScript estarán disponibles para ese archivo.

Para ver todos los snippets disponibles para el tipo de archivo actual, presiona Alt + Shift + S. Si deseas incorporar un snippet de los de la lista desplegable, haz clic en él y Atom insertará el snippet completo en tu editor sin ningún tipo de molestia.

Si ya te conoces todas las opciones, no tienes que cargar necesariamente toda la lista. Cuando empieces a escribir, en Atom aparecá un autocompletador que mostrará los snippets de código disponibles que pertenecen al ámbito actual mediante la cadena que hayas escrito hasta el momento.

Por ejemplo, si escribe el carácter h en un archivo .html, aparecerá una lista desplegable con todos snippets asociados a HTML que empiezan por la letra H.

Al hacer clic en cualquiera de las opciones, Atom pegará la etiqueta HTML completa, y colocará el cursor dentro del tag de inicio y el de cierre.

Si no quieres tener que lidiar con la lista desplegable, puedes lograr el mismo resultado escribiendo h1, y presionando Tab o Intro. Mediante el uso de dichas teclas insertaremos el snippet de código que pertenezca al prefijo del snippet.

Añadiendo tus propios snippets personalizados

Encuentra el archivo de configuración

Para añadir tus propios snippets a Atom, primero debes encontrar el archivo de configuración llamado snipets.cson que es un archivo CoffeeScript Object Notation.

Haz clic en el menú File > Snippets... de la barra superior, y Atom abrirá el archivo snippets.cson, en el que podrás añadir tus propios snippets personalizados.

Escoge el ámbito adecuado

Ahora, necesitas tener claras cuatro cosas antes de añadir el snippet de código:

• El nombre del ámbito
• El nombre del snippet
• El prefijo que habilitará el uso del snippet
• El cuerpo del snippet

El nombre, el prefijo y el cuerpo del snippet dependen exclusivamente de ti, sin embargo, debes saber el nombre del ámbito de la aplicación antes de añadir tus snippets personalizados.

Para saber el ámbito que necesitas, haz clic en el File > Settings en l¡el menú superior, y luego ve a la pestaña Packages dentro de Settings. A continuación, realiza una búsqueda para el ámbito que necesites. Por ejemplo, si deseas añadir snippets de código para el lenguaje HTML, escribe HTML en la barra de búsqueda.

Haz clic en el paquete del lenguaje escogido, y abre su propio Settings. Dentro del Grammar Settings, encontrarás rápidamente el nombre del ámbito.

Aquí tienes unos cuantos ámbitos que puedes utilizar en tus proyectos Atom:

• Texto plano: .text.plain
• HTML: .text.html.basic
• CSS: .source.css
• Sass: .source.sass
• LESS: .source.css.less
• JavaScript: .source.js
• PHP: .text.html.php
• Python: .source.python
• Java: .source.java

No olvides que debes añadir un punto ( . ) antes del nombre del ámito para utilizarlo en el fichero snippets.cson.

Crear snippets de código de una sola línea

Para crear snippets de código de una sola línea, debes añadir el ámbito, el nombre, el prefijo y el cuerpo del snippet dentro del fichero snippets.cson, utilizando la siguiente sintaxis:

Este snippet añade un tag h4 con la clase widget-title en el ámbito HTML. Puedes añadir más snippets de una sola línea a tu editor Atom utilizando esta sintaxis.

Después de guardar los cambios del archivo de configuración, siempre que escribas el prefijo y presiones la tecla Tab, Atom pegará el cuerpo del snippet en tu editor de código. El nombre del snippet (en el ejemplo, Widget Title) se mostrará en el cuadro de resultados del autocompletador.

Crear snippets de código de muchas líneas

Los snippets multilíneas utilizan una sintaxis un poco diferente. Es necesario añadir los mismos datos que en los snippets de una sola línea (el ámbito de aplicación, el nombre, el prefijo y el cuerpo del snippet).

Lo diferente es que es necesario colocar el cuerpo del snippet dentro de estos caracteres """ (tres dobles comillas).

Si quieres añadir más de un snippet personalizado en el mismo ámbito, añade el nombre del ámbito una sola vez, y después lista los snippets uno por uno.

Añadir paradas en la tabulación

Puede facilitar aún más el uso de los snippets personalizados añadiendo tabulaciones en el cuerpo del snippet. Las tabulaciones indican los puntos donde el usuario podrá navegar utilizando la tecla Tab. Con las tabulaciones ahorrarás tiempo yendo solo a aquellas zonas donde requieren que sean completadas.

Puedes añadir tabulaciones utilizando la sintaxis $1, $2, $3... Atom permite colocar el cursor en el lugar que se encuentra $1, entonces puedes saltar a $2 con la tecla Tab, luego a $3, y así sucesivamente.

Fuente: hongkiat.com