Facebook Twitter RSS Reset

A programar! Mira de lo que es capaz este gran editor(Atom)


A programar! Mira de lo que es capaz este gran editor(Atom)

Hola linces programadores, en el post anterior vimos todo lo que podemos hacer con Sublime Text, pero como sabemos, sublime text es uno de muchos, pues siguiendo el orden de mi post de editores de texto para programar, ahora veremos todo lo que nos trae este excelente editor, se trata de GitHub Atom, el editor de esa gran plataforma colaborativa.

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Primero veamos las características básicas de este editor de texto

Cuando tu abras atom por primera vez tu veras una ventana como esta

A programar! Mira de lo que es capaz este gran editor(Atom)

Esta es la ventana de bienvenida de atom y te da un buen punto de comienzo sobre como comenzar a usar el editor

programar

Command Palette

Este puede ser el comando mas importante de Atom, CTRL + SHIFT + P.

A programar! Mira de lo que es capaz este gran editor(Atom)

No sólo se puede ver y rápidamente buscar a través de miles de posibles comandos, también se puede ver si hay una combinación de teclas asociada a ella. Esto es muy bueno porque significa que se puede adivinar su manera de hacer las cosas, además de conocer las pulsaciones de teclas de acceso directo para hacerlo.

A programar! Mira de lo que es capaz este gran editor(Atom)

Configuracion y preferencias

Atom posee una gran variedad de preferencias que puedes modificar accediendo a la ventana de preferencias.

A programar! Mira de lo que es capaz este gran editor(Atom)

Para acceder a esta ventana puedes colocar este comando settings-view:open en la command palette o presionar CTRL + , (coma).

A programar! Mira de lo que es capaz este gran editor(Atom)

Cambiar características visuales

Atom nos trae 4 estilos visuales preinstalados, pero nosotros instalaremos uno extra mas adelante, para cambiarlo deben acceder a preferencias, y alli ir a la seccion “Themes”

A programar! Mira de lo que es capaz este gran editor(Atom)

programar

Paquetes en Atom

Atom tiene a disponibilidad cientos de paquetes, que añaden funcionalidades y caracteristicas interesantes y utiles, que pueden ayudarnos a trabajar mejor, para instalarlos debemos ir a la ventana de preferencias, ya os he explicado anteriormente como hacerlo, y ahora ir a la seccion Instalar

A programar! Mira de lo que es capaz este gran editor(Atom)

Alli podran seleccionar si desean buscar temas o paquetes, y acontinuacion dar click en Instalar en el paquete de su preferencia.

A programar! Mira de lo que es capaz este gran editor(Atom)

Configuración de paquetes

En la ventana de Preferencias, podremos configurar un paquete instalado, dirigiendonos a la seccion packages, alli podremos ver que opciones estan disponibles para ese paquete

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Temas de atom

Justo como les decia anteriormente, en la seccion Install podremos presionar el boton Themes para buscar e instalar mas temas.

A programar! Mira de lo que es capaz este gran editor(Atom)

Si presionamos click en el tema el editor nos enviara a la pagina del tema en Atom.io donde podremos ver una captura del tema en la mayor parte de los casos

Si presionando click en install, podremos instalar el tema y podremos cambiarlo en la seccion themes en las preferencias de Atom

A programar! Mira de lo que es capaz este gran editor(Atom)

programacion

Moverse en Atom

Podremos movernos alrededor de nuestro código o el editor sin usar el mouse, mediante comandos de teclado que les explicare a continuacion:

En primer lugar, Atom viene con muchas de las combinaciones de teclas básicas de Emacs para navegar en un documento. Para subir y bajar un solo carácter, puede utilizar ctrl-P y ctrl-N. Para ir a la izquierda y derecha de un solo carácter, puede utilizar ctrl-B y Ctrl-F. Estos son el equivalente de utilizar las teclas de flecha, aunque algunas personas prefieren no tener que mover sus manos hacia donde se encuentran las teclas de flechas en su teclado.

In addition to single character movement, there are a number of other movement keybindings.

alt-B, alt-left-> Ir al principio de una palabra

alt-F, alt-right-> Ir al final de una palabra

cmd-right, ctrl-E-> Ir al final de una linea

cmd-left, ctrl-A-> Ir al primer caracter de una linea

cmd-up-> Mover una linea completa hacia arriba

cmd-down-> Mover una linea completa hacia abajo

También puede moverte directamente a un número de línea específico (o columna) con ctrl-G. Con ello se abre un cuadro de diálogo que le pide que la línea que desea saltar. También puede utilizar la fila: la sintaxis de la columna para saltar a un caracter de esa línea también.

A programar! Mira de lo que es capaz este gran editor(Atom)

github

Navegacion con símbolos

Para saltar a un símbolo, como una definición de método, pulse cmd-r. Esto abre una lista de todos los símbolos en el archivo actual, que puede filtrar, similar a CMD-t. Para buscar símbolos a través de su proyecto, utilice cmd-shift-r.

A programar! Mira de lo que es capaz este gran editor(Atom)

También puede utilizar ctrl-alt-abajo para saltar directamente a la declaración del método.

En primer lugar usted necesita asegurarse de que tiene un archivo de etiquetas (o tags) generados para su proyecto. Esto se puede hacer mediante la instalación de ctags y ejecutar un comando como ctags -R src / desde la línea de comandos en el directorio raíz de tu proyecto.

Usted puede personalizar la forma en las etiquetas se generan mediante la creación de su propio archivo .ctags en su directorio personal (~ / .ctags).

La funcionalidad símbolos de navegación se implementa en el paquete / símbolos-view.

editor

Marcadores de Atom

Atom también tiene una gran manera de marcar líneas específicas en tu proyecto para que pueda saltar de nuevo a ellos rápidamente.

Si pulsa Alt Gr-F2, Atom alternará un “marcador” en la línea actual. Puede establecer estos a través de su proyecto y los podra utilizar para encontrar y saltar a líneas importantes de su proyecto rápidamente.

Si usted choca con F2, Atom saltará al siguiente marcador en el archivo que actualmente haya centrado. Si utiliza shift-F2 se hará un ciclo hacia atrás en su lugar.

También puede ver una lista de marcadores actuales todo de su proyecto y rápidamente filtrarlos y saltar a cualquiera de ellos pulsando Ctrl-F2.

programar

Selección de texto en Atom

En atom podremos encontrar muchas acciones para la seleccion de texto mediante el teclado

ctrl-shift-P-> Selección arriba.

ctrl-shift-N-> Seleccion abajo.

ctrl-shift-B-> Seleccionar caracter anterior.

ctrl-shift-F-> Seleccionar caracter siguiente.

alt-shift-B, alt-shift-left-> Seleccionar una palabra en su inicio

alt-shift-F, alt-shift-right-> Seleccionar una palabra en su final

ctrl-shift-E, cmd-shift-right-> Seleccionar hasta el final de una linea

ctrl-shift-A, cmd-shift-left -> Seleccionar primer caracter de una linea

cmd-shift-up-> Seleccionar hacia el unicio de un archivo

cmd-shift-down-> Seleccionar hasta el final de un archivo

cmd-L -> Seleccionar linea entera

ctrl-shift-W-> Seleccionar palabra actual

programacion

Manipulacion de texto

Hay un puñado de combinaciones de teclas para la manipulación de texto básico que puede ser útil. Estos van desde moverse líneas de texto y la duplicación de líneas.

cmd-J-> Unir la línea actual con la siguiente linea

ctrl-cmd-up, ctrl-cmd-down-> Mover la linea actual hacia arriba o abajo

cmd-shift-D-> Duplicar la linea actual

cmd-K, cmd-U-> Convertir la palabra seleccionada en Mayúscula

cmd-K, cmd-L-> Convertir la palabra seleccionada en minúscula.

A programar! Mira de lo que es capaz este gran editor(Atom)

Borrar y cortar texto

ctrl-shift-K -> Borrar la linea actual

ctrl-delete-> Borrar la siguiente palabra.

cmd-backspace-> Borrar palabra desde su inicio.

alt-delete, alt-D-> Borrar palabra hasta su final

github

Cursores y seleccion multiple

Atom tiene la capacidad de soportar multiples cursores para la seleccion multiple.

ctrl-click-> Añadir nuevo cursor

cmd-shift-L-> Convertir una selección de varias líneas en múltiples cursores

ctrl-alt-up, ctrl-alt-down-> Añadir otro cursor debajo/arriba del cursor actual

cmd-D-> Seleccionar la siguiente palabra en el documento que es la misma que la palabra seleccionada actualmente

ctrl-cmd-G-> Seleccionar todas las palabras en un documento que son la misma que la que esta debajo del cursor actual

A programar! Mira de lo que es capaz este gran editor(Atom)

editor

Espacios en blanco

Atom viene con varios comandos para ayudarle a gestionar el espacio en blanco en el documento. Si está trabajando con un documento que tiene espacios en blanco mezclado, estos comandos son excelentes para ayudar a normalizar el archivo. No hay atajos de teclado para los comandos de espacio en blanco, por lo que tendrán que buscar su paleta de comandos para “Convert Spaces to Tabs” (o viceversa) para ejecutar uno de estos comandos.

Los comandos de espacio en blanco se implementan en el paquete de espacios en blanco. La configuración de los comandos de espacio en blanco se gestionan en la página para el paquete de espacios en blanco.

A programar! Mira de lo que es capaz este gran editor(Atom)

programacion

Brackets

Atom viene con un soporte inteligente y fácil para la manipulación de brackets.

Lo hará mediante destacado por defecto [], (), y {} corchetes de estilo cuando el cursor está sobre ellos. También destacará las etiquetas XML y HTML.

Atom también autocompletar automáticamente [], (), y {}, “”, “”, “”, ”, «», <>, y acentos abiertos al escribir. Si usted tiene una selección y escribe cualquiera de estos soportes o las cotizaciones de apertura, Atom encerrará la selección con los de apertura y cierre entre paréntesis o comillas.

Hay algunos otros comandos soporte relacionado interesantes que se pueden utilizar.

ctrl-m ->Saltar a la ménsula de búsqueda de la adyacente al cursor. Salta al soporte envolvente más cercana cuando no hay soporte adyacente.

ctrl-cmd-m -> Seleccione todo el texto dentro de los corchetes actuales

-alt cmd-. ->Cierre el XML actual / etiqueta HTML

La funcionalidad de soportes se implementa en el paquete atom bracket matcher. Como todos los paquetes, podrascambiar los valores predeterminados relacionados o desactivar por completo, esto desde la seccion “packages” de configuracion.

A programar! Mira de lo que es capaz este gran editor(Atom)

Codificación

Atom también incluye algo de apoyo básico de codificación de archivos cuando usted se encuentra trabajando con archivos que no son codificados en UTF-8, o si usted desea crear uno.

Ctrl-Shift-U-> Alternar menú para cambiar la codificación de archivos

Si abre codificación de archivos, puede elegir una codificación archivo alternativo para guardar el archivo en.

Al abrir un archivo, Atom intentará detectar automáticamente la codificación. Si Atom no puede identificar la codificación, la codificación por defecto a UTF-8, que es también la codificación por defecto para los nuevos archivos.

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Buscar y reemplazar

La búsqueda y reemplazo de texto en su archivo o proyecto es rápida y fácil en Atom.

cmd-F -> Buscar en un buffer

cmd-shift-f-> Buscar en todo el proyecto

Si inicia cualquiera de estos comandos, le dará la bienvenida con el panel “Buscar y reemplazar” en la parte inferior de la pantalla.

A programar! Mira de lo que es capaz este gran editor(Atom)

Para buscar dentro de su archivo actual se puede presionar cmd-F, introduzca una cadena de búsqueda y pulsa enter (o el botón “Buscar siguiente”A programar! Mira de lo que es capaz este gran editor(Atom)A programar! Mira de lo que es capaz este gran editor(Atom) varias veces para desplazarse por todos los partidos en ese archivo. El panel “Buscar y reemplazar” también contiene botones para alternar entre mayúsculas y minúsculas, la realización de expresiones regulares y de alcance selecciones.

Si escribe una cadena en el cuadro de texto “Reemplazar en búfer”, puede reemplazar partidos con una cadena diferente. Por ejemplo, si desea reemplazar cada instancia de la cadena “Scott” con la cadena “Dragón”, deberá introducir los valores en los dos cuadros de texto y pulsa el botón “Reemplazar todo” para realizar los reemplazos.

También puede buscar y reemplazar lo largo de todo el proyecto si se invoca el panel con cmd-shift-F.

A programar! Mira de lo que es capaz este gran editor(Atom)

programacion

Snippets

los snippets son una manera increíblemente poderosa para generar rápidamente sintaxis de código donde comúnmente se necesita de un acceso directo.

La idea es que se puede escribir algo así como HABTM y luego pulsa la tecla de tabulación y que va a expandirse en has_and_belongs_to_many.

Muchos de los paquetes vienen equipados con sus propios fragmentos que son específicos de ese modo. Por ejemplo, el paquete de lenguaje HTML que proporciona soporte para resaltado de sintaxis HTML y gramática viene con docenas de snippets para crear muchas de las diferentes etiquetas HTML. Si crea un nuevo archivo HTML en Atom, puede escribir html y luegopresionar TAB y se ampliará a:

A programar! Mira de lo que es capaz este gran editor(Atom)

Asimismo, coloque el cursor en el centro de la etiqueta del título para que pueda comenzar inmediatamente llenar la etiqueta. Muchos fragmentos tienen múltiples puntos de enfoque que se puede mover a través de la tecla de tabulación, así – por ejemplo, en el caso de este fragmento HTML, una vez que haya llenado la etiqueta del título se puede presionar TAB y el cursor se moverá a la media del cuerpo de la etiqueta.

Para ver todos los fragmentos disponibles para el tipo de archivo que tiene actualmente abierta, puede escribir alt-shift-S.

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Autocompletacion

Si usted todavía está buscando para ahorrar algo de tiempo a escribir, Atom también viene con la funcionalidad de autocompletar simple.

El Autocompleter le permite ver e insertar terminaciones posibles en el editor usando ctrl-espacio.

A programar! Mira de lo que es capaz este gran editor(Atom)

programar

Desplegamiento (folding)

Si quieres ver una visión general de la estructura del archivo de código que está trabajando, folding puede ser una herramienta útil. Plegable oculta bloques de código, como las funciones o bloques en bucle para simplificar lo que está en la pantalla.

Puede doblar bloques de código haciendo clic en las flechas que aparecen cuando se pasa el cursor del ratón sobre la cuneta. También puede plegar y desplegar desde el teclado con las combinaciones de teclas [alt y cmd–]-alt cmd-.

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Paneles

Puede dividir cualquier panel editor de forma horizontal o vertical utilizando cmd-k + flecha, donde la flecha es la dirección de dividir el panel. Una vez que tenga una sección dividida, puede mover el foco entre ellos con cmd-k cmd-flecha donde la flecha es la dirección hacia donde el foco debe trasladarse.

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Grammar

Con esta funcion podremos seleccionar el lenguaje en el que estamos trabajando, Atom lo hace automaticamente pero si llegase a fallar podremos seleccionarlo manualmente con ctrl-shift-L.

A programar! Mira de lo que es capaz este gran editor(Atom)

programar

Control de versiones en Atom

El control de versiones es un aspecto importante de cualquier proyecto

Con cmd-alt-Z podremos chequear el HEAD de nuestro proyecto.

Esta es una forma rápida para descartar los cambios guardados y por etapas que ha realizado y restaurar el archivo a la versión de la CABEZERA.

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

github

Estas son las caracteristicas mas resaltantes, ahora vamos a personalizar nuestro Atom, lo principal es ver el editor y ver que nos falta nuestro preciado MINIMAP, asi que vamos a instalar paquetes!

A programar! Mira de lo que es capaz este gran editor(Atom)

editor

Minimap

Este paquete nos mostrara un minimapa de nuestro codigo a la derecha, similar a sublime text


A programar! Mira de lo que es capaz este gran editor(Atom)

y con eso tendremos un hermoso y muy completo minimap

A programar! Mira de lo que es capaz este gran editor(Atom)

Nota: si no funciona luego de instalar, deberan instalar phyton en su sistema

A programar! Mira de lo que es capaz este gran editor(Atom)

Markdown Preview

Markdown hoy en día es utilizado por muchos sistemas de blog, wiki y sitios como GitHub, este paquete nos ayuda a tener una vista previa del código, útil para evitarnos tener que hacer un push más al repositorio por un error en nuestro README.md

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Pretty JSON

Identa tus archivos JSON para que sean más fáciles de leer.

A programar! Mira de lo que es capaz este gran editor(Atom)

programar

Linter

Valida tu código! Linter te muestra los errores que tienes en tu código, también muestra alertas recomendando que uses las mejores prácticas. Disponible para múltiples lenguajes de programación (ir al sitio del paquete para ver la lista de lenguajes disponibles).

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Terminal

Poder tener una terminal en alguna parte del IDE es una necesidad hoy en día, con este paquete podrás tener la terminal en una pestaña.

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Atom Compile Coffee

Si eres de los que escribe código en .coffee pero luego usas el .js este paquete te sirve para generar el .js cuando guardas tu archivo .coffee, así te ahorras el tiempo de estar compilando tus archivos.

editor

Preview

CoffeeScript

Literate CoffeeScript

LESS

Jade

DogeScript

TypeScript

Stylus

DSON

React (JSX)

EmberScript

ng-classify

SASS

Markdown

Haml

ClojureScript

Dart

A programar! Mira de lo que es capaz este gran editor(Atom)

programacion

Auto Indent

La identación es una buena practica en el código, pero también es requerido para lenguajes de programación como python o plantillas como Jade, con este paquete podrás identar con dar click derecho en la ventana del archivo y luego click en Enable auto-indent.

A programar! Mira de lo que es capaz este gran editor(Atom)

github

Git Plus

Git Plus es el paquete que te permite ejecutar muchos comandos git desde el editor, es muy fácil, en la Mac ejecutas: Command + Shift + H y te saldrá la ventana con las opciones disponibles.

A programar! Mira de lo que es capaz este gran editor(Atom)

editor

Color Picker

Nos permite una visualizacion de el color que colocamos en nuestro codigo, tambien nos permite seleccionar colores desde una ventana pequeña, muy util para diseño grafico

A programar! Mira de lo que es capaz este gran editor(Atom)

programacion

Y no podia faltar nuestro querido EMMET

Tiene muchas funcionalidades para los programadores, podremos verlas en esta tabla

A programar! Mira de lo que es capaz este gran editor(Atom)

podemos verlo en accion en Sublime text aqui

A programar! Mira de lo que es capaz este gran editor(Atom)

(no encontre en Atom pero viene siendo lo mismo)

A programar! Mira de lo que es capaz este gran editor(Atom)

Se me olvidaba, nuestro tema sera, por supuesto Seti, lo pueden encontrar en los paquetes como seti-ui y para la sintaxys seti-syntax

Miren lo hermoso que quedaria nuestro editor:

A programar! Mira de lo que es capaz este gran editor(Atom)

¿A quien no le gustaria programar todo el dia con un editor tan visual y funcional como este?

programar

Para acceder a mis otros posts hagan click en las imagenes

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

A programar! Mira de lo que es capaz este gran editor(Atom)

Eso fue todo, ya saben si tienen dudas déjenla en comentarios, o envienme MP y den fav, reco, y puntos y estaré haciendo mas de estos posts.

A programar! Mira de lo que es capaz este gran editor(Atom)

No comments yet.

Leave a Comment