Cómo agregar fragmentos de código personalizado a Atom

No es una coincidencia que Atom, el editor de código fuente creado por Github, sea popular en la comunidad de desarrollo web. No solo es extensible fácilmente con miles de paquetes Atom, y tiene un amplio soporte de idiomas, pero casi todas sus partes son personalizables por el usuario.

Al aprovechar la función de fragmentos de Atom, puede hacer que su flujo de trabajo de codificación sea más productivo, ya que mediante la reutilización de fragmentos de código recurrentes puede reducir la parte repetitiva de su trabajo. En esta publicación, le mostraré cómo puede usar los fragmentos de código incorporados de Atom y crear sus propios fragmentos personalizados .

Use fragmentos de código incorporados

De forma predeterminada, Atom viene con fragmentos de código integrados, cada uno de los cuales está vinculado a un ámbito que pertenece a un determinado tipo de archivo. Por ejemplo, si está trabajando en un archivo con la extensión .js, solo los fragmentos del alcance de JavaScript estarán disponibles para ese archivo.

Para ver todos los fragmentos disponibles para su tipo de archivo actual, presione Alt + Mayús + S. Si elige un fragmento de la lista desplegable y hace clic en él, Atom insertará el fragmento completo en su editor sin ningún tipo de molestia.

Si ya conoce las opciones, no necesariamente tiene que cargar toda la lista. Cuando comienza a escribir, Atom muestra un cuadro de resultados de autocompletar, que contiene los fragmentos de código disponibles que pertenecen al alcance determinado y la cadena que ha tipeado hasta ahora.

Por ejemplo, si escribe el carácter h en un archivo .html, aparecerá una lista desplegable con todos los fragmentos HTML incorporados que comienzan con h .

Al hacer clic en cualquier opción, Atom pegará la etiqueta HTML completa (por ejemplo,

), y coloque el cursor dentro de la etiqueta de inicio y cierre .

Si no quiere molestarse con la lista desplegable, puede lograr el mismo resultado escribiendo h1, y presionando Tab o Enter - ambas teclas insertan el fragmento de código completo que pertenece al prefijo del fragmento.

Agregar sus fragmentos de código personalizados

1. Encuentra el archivo de configuración

Para agregar sus propios fragmentos de código personalizados a Atom, primero debe encontrar el archivo de configuración llamado snippets.cson que es un archivo de notación de objetos CoffeeScript .

Haga clic en el menú File > Snippets... en la barra superior, y Atom abrirá el archivo snippets.cson al que puede agregar sus propios fragmentos personalizados.

2. Encuentra el alcance correcto

Necesitará cuatro cosas para agregar su fragmento personalizado:

1. El nombre del alcance
2. El nombre del fragmento
3. El prefijo que funcionará como el mango del fragmento
4. El cuerpo del fragmento

El nombre, el prefijo y el cuerpo del fragmento (2-4) dependen exclusivamente de usted, sin embargo, debe encontrar el nombre del alcance (1) antes de agregar los fragmentos personalizados.

Para encontrar el alcance que necesita, haga clic en el menú File > Settings en la barra de menú superior, luego encuentre la pestaña Packages entre las Configuraciones. Aquí, ejecute una búsqueda del alcance que necesita, por ejemplo, si desea agregar fragmentos de código al lenguaje HTML, escriba HTML en la barra de búsqueda.

Haga clic en el paquete de soporte de idioma del idioma elegido y abra su propia Configuración. Entre las configuraciones de Gramática, puede encontrar rápidamente el nombre del alcance, como puede ver en la captura de pantalla a continuación.

Estos son algunos ámbitos que puede utilizar en sus proyectos Atom:

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

No olvide que deberá agregar un punto ( . ) Al frente del nombre del alcance para usarlo en el archivo snippets.cson .

3. Crear fragmentos de código de una sola línea

Para crear un fragmento de código de una sola línea, debe agregar el alcance, el nombre, el prefijo y el cuerpo del fragmento al archivo snippets.cson, usando la siguiente sintaxis:

 '.text.html.basic': 'Título del widget': 'prefijo': 'wti' 'cuerpo': ' 
 ' 

Este fragmento de ejemplo agrega un

etiqueta con la clase widget-title para el alcance HTML. Puede agregar cualquier otro fragmento de código de una línea a su editor Atom siguiendo esta sintaxis.

Después de guardar el archivo de configuración, cada vez que escriba el prefijo y presione la tecla Tab, Atom pegará el cuerpo del fragmento de código correspondiente en su editor de código. El nombre del fragmento (en el Widget Title ejemplo) se mostrará en el cuadro de resultados de autocompletar.

4. Crear fragmentos de código multilínea

Los fragmentos de código multilínea usan una sintaxis un poco diferente. Debe agregar los mismos datos que para los fragmentos de una sola línea: el alcance, el nombre, el prefijo y el cuerpo del fragmento.

Lo que es diferente aquí es que debe colocar el cuerpo del fragmento dentro de un par de """ (tres comillas dobles) .

 '.text.html.basic': 'Enlace de imagen': 'prefijo': 'iml' 'cuerpo': "" " 
 
 "" " 

Si desea agregar más de un fragmento personalizado al mismo ámbito, agregue el nombre del alcance solo una vez, luego liste los fragmentos uno a uno:

 '.text.html.basic': 'Título del widget': 'prefijo': 'wti' 'cuerpo': ' 
 '' Enlace de imagen '' 'prefijo': 'iml' 'cuerpo': "" " 
 
 "" " 

5. Agregar tab stops

Puede facilitar aún más el uso de sus fragmentos de código personalizados agregando tabulaciones al cuerpo del fragmento. La tabulación indica los lugares donde el usuario puede navegar utilizando la tecla Tab. Con tabulaciones puede guardar el tiempo que requiere la navegación en texto.

Puede agregar tabulaciones usando la sintaxis de $1, $2, $3, ... Atom posicionará el cursor en el lugar que encuentre $1, luego puede saltar a $2 con la tecla Tab, luego a $3, y así sucesivamente.

 '.text.html.basic': 'Enlace de imagen': 'prefijo': 'iml' 'cuerpo': "" " 
 
 "" " 

6. Agregue parámetros opcionales

Atom le permite agregar información adicional a sus fragmentos mediante el uso de parámetros opcionales . Esta función puede ser útil si otra persona también usa su editor y desea informarles sobre el propósito del fragmento, o si tiene fragmentos de código personalizados tan complicados que necesita agregarles notas.

Los valores de los parámetros opcionales se muestran en el cuadro de resultados de autocompletar que aparece cuando comienza a escribir un prefijo. En el siguiente ejemplo, agregué una descripción y un enlace More... al fragmento personalizado del Widget Title anterior:

 '.text.html.basic': 'Título del widget': 'prefijo': 'wti' 'cuerpo': ' 
 '' descripción ':' Puede agregar un título de widget con este fragmento al widget de la barra lateral '. 'descriptionMoreURL': 'http://hongkiat.com' 

Cuando el usuario comienza a escribir el prefijo wti, la información adicional (descripción + enlace) se mostrará en la parte inferior del cuadro de resultados de autocompletar. Eche un vistazo a los otros parámetros opcionales que puede usar para agregar información adicional a sus fragmentos personalizados.