Cómo agregar fragmentos de código personalizados a Atom
No es una coincidencia que Átomo, El editor de código fuente creado por Github es popular en la comunidad de desarrollo web. No es sólo fácilmente extensible con miles de paquetes Atom, y tiene un soporte de lenguaje amplio, pero casi todas sus partes son personalizable por el usuario.
Al aprovechar Atom's Característica de fragmentos, puede hacer que su flujo de trabajo de codificación sea más productivo, ya que reutilizando fragmentos de código recurrentes Puedes reducir la parte repetitiva de tu trabajo. En este post, te mostraré cómo puedes usa los fragmentos de código incorporados de Atom, y crea tus propios fragmentos personalizados.
Usar fragmentos de código incorporados
Por defecto, Atom viene con fragmentos de código incorporados, cada uno de los cuales es obligado a un alcance Perteneciente a un determinado tipo de archivo. Por ejemplo, si está trabajando en un archivo con .js extensión, solo los fragmentos pertenecientes al ámbito de JavaScript estarán disponibles para ese archivo.
Para ver todos los fragmentos disponibles para su tipo de archivo actual, presione Alt + Shift + S. Si elige un fragmento de la lista desplegable y hace clic en él, Atom insertará el fragmento completo en su editor sin más problemas..
Si ya conoce las opciones, no necesariamente tiene que cargar toda la lista. Cuando empiezas a escribir, Atom muestra una cuadro de resultados autocompletado arriba, que contiene los fragmentos de código disponibles que pertenecen al ámbito determinado y la cadena que ha escrito hasta ahora.
Por ejemplo, si escribe el h personaje en un .html archivo, una lista desplegable con todos los fragmentos de código HTML integrados que comienzan con h aparecerá.
Al hacer clic en cualquier opción, Atom pega la etiqueta HTML completa (p.ej. ), y posiciona el cursor dentro de la etiqueta de inicio y cierre.
Si no desea molestarse con la lista desplegable, puede lograr el mismo resultado escribiendo h1, y presionando Tab o Enter - ambas teclas inserte el fragmento de código completo Perteneciente al prefijo del fragmento..
Agregando tus 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 eso es un Notación de objetos de CoffeeScript expediente.
Haga clic en el Archivo> Fragmentos ... menú en la barra superior, y Atom abrirá el snippets.cson Archivo al que puede agregar sus propios fragmentos personalizados.
2. Encuentra el alcance correcto
Necesitará cuatro cosas Para agregar su fragmento personalizado:
los nombre del alcance
los nombre del fragmento
los prefijo Eso funcionará como el identificador del fragmento.
los cuerpo del fragmento
El nombre, el prefijo y el cuerpo del fragmento (2-4) solo dependen de usted, sin embargo, debe encontrar el nombre del ámbito (1) antes de agregar tus fragmentos personalizados.
Para encontrar el alcance que necesita, haga clic en el Archivo> Configuraciones menú en la barra de menú superior, luego busque Paquetes pestaña entre los ajustes. Aquí, realice una búsqueda del ámbito 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 abrir su propia Configuración. Entre el Ajustes de gramática, Puede encontrar rápidamente el nombre del alcance, como puede ver en la captura de pantalla a continuación..
Aquí hay algunos ámbitos que puede usar en sus proyectos Atom:
Texto sin formato: .Texto sin formato
HTML: .text.html.basic
CSS: .source.css
Hablar con descaro a: .source.sass
MENOS: .source.css.less
JavaScript: .fuente.js
PHP: .text.html.php
Pitón: .fuente.python
Java: .fuente.java
No olvides que necesitarás añadir un punto (.) delante del nombre del alcance para usarlo en el snippets.cson expediente.
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 a la snippets.cson archivo, utilizando la siguiente sintaxis:
'.text.html.basic': 'Título del widget': 'prefijo': 'wti "cuerpo': ''
Este fragmento de ejemplo agrega un etiqueta con el título del widget clase al ámbito de HTML. Puede agregar cualquier otro fragmento de código de una sola línea a su editor Atom siguiendo esta sintaxis.
Después de guardar el archivo de configuración, siempre que escribe el prefijo y presiona la tecla Tab, Atom pegará el fragmento de fragmento correspondiente en tu editor de código. El nombre del fragmento (en el ejemplo Título del widget) se mostrará en el cuadro de resultados de autocompletar.
4. Crear fragmentos de código multilínea
Fragmentos de código multilínea Usa un poco diferente de sintaxis. Debe agregar los mismos datos que para los fragmentos de una sola línea: el ámbito, el nombre, el prefijo y el cuerpo del fragmento.
Lo que es diferente aquí es que necesitas colocar el recorte del cuerpo dentro de un par de "" (tres comillas dobles).
Si quieres agregar más de un fragmento personalizado En el mismo ámbito, añada el nombre del ámbito. sólo una vez, luego liste los fragmentos uno por uno:
'.text.html.basic': 'Título del widget': 'prefijo': 'wti "cuerpo': '"Enlace de imagen ':' prefijo ':' iml" cuerpo ': "" " ""
5. Añadir tabulaciones
Puede facilitar aún más el uso de sus fragmentos de código personalizados agregando tabulaciones al cuerpo del fragmento. Las tabulaciones indican los lugares donde el usuario puede navegar usando la tecla Tab. Con tabulaciones puede ahorrar el tiempo que requiere la navegación en el texto.
Puede agregar tabulaciones utilizando la $ 1, $ 2, $ 3,… sintaxis. Atom colocará el cursor en el lugar que encuentre. $ 1, entonces puedes saltar a $ 2 con la tecla Tab, luego a $ 3, y así.
Atom te permite agregar información extra a sus fragmentos utilizando parámetros opcionales. Esta función puede ser útil si otra persona también usa su editor y desea informarles el propósito del fragmento, o si tiene fragmentos personalizados tan complicados que necesita agregarles notas..
Los valores de los parámetros opcionales son mostrado en el cuadro de resultados de autocompletar que aparece cuando empiezas a escribir un prefijo. En el siguiente ejemplo, agregué una descripción y una Más… enlace a la anterior Título del widget Fragmento personalizado:
'.text.html.basic': 'Título del widget': 'prefijo': 'wti "cuerpo': '"description ':' Puede agregar un título de widget con este fragmento a su widget de 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. Echa un vistazo a la otros parámetros opcionales Puedes usarlo para agregar información adicional a tus fragmentos personalizados..
