Hoy les voy a hablar sobre el editor de código Atom.

Bueno hoy es el día 2 de mis prácticas para el labora.

Hoy les voy a hablar del editor de código Atom y por que me enamore de este editor cuando la mayoría usan sublime.

La verdad que con unos simples plugins tu Atom se puede personalizar y puede ser igual que sublime pero con las ventajas de Atom.

Si no conoces Atom, te recomiendo que entres en su web y le eches un ojo. Bajo mi punto de vista, tiene el mejor gestor de plugins o extensiones que puedes encontrar hoy en día. Y hasta el día de hoy no me ha dado grandes quebraderos de cabeza. Simplemente funciona.

Les voy a decir para mi parecer cuales son los mejores plugins de Atom que yo uso y que veo indispensable para cualquier desarrollador web.

Recuerda, estos son los más útiles para mí, pero quizás tú encuentres otros que te gusten más o te vayan mejor. De todas formas, seguro que la mayoría te sirven.

file-icons

Este simple plugin añade iconos y colores a los archivos que tenemos en Atom según su tipo concreto para que nos sea más sencillo identificarlos.

Gama de iconos que file-icons gestiona para identificar tipos de archivo.

Gama de iconos que file-icons gestiona para identificar tipos de archivo.

De un simple vistazo sabrás el tipo de archivo que tienes delante. Parece una tontería, pero una vez lo pruebas ya no puedes dejar de usarlo.

minimap

Si eres programador, seguro que muchas veces te encuentras con archivos bastante largos. Pues con minimap podrás ver una representación de los contenidos del archivo en la parte derecha del código. De este modo te resultará más sencillo ver si en un momento dado te encuentras más arriba o más abajo del archivo y así no perderte.

Puedes ver el mini mapa en la parte derecha, con los cambios en el código marcados.

Puedes ver el mini mapa en la parte derecha, con los cambios en el código marcados.

Y lo mejor de todo es que lo puedes complementar con el plugin minimap-git-diff, que lo que hace es marcar en el mini mapa los lugares donde has hecho cambios con otro color.

pigments

Este plugin te muestra los colores que encuentra en tus archivos. Especialmente útil cuando estás editando CSS.

Ejemplo de uso de pigments para Atom.

Ejemplo de uso de pigments para Atom.

color-picker

Con este plugin seleccionar el color que quieres incluir en tus estilos CSS es muy sencillo. Tan solo has de hacer clic derecho y seleccionar la opción «Color Picker» para que se abra un selector de color donde visualmente escoger el color que mejor se adapte a tus necesidades. El mejor compañero del plugin pigments.

Selector de color de colorpicker.

Selector de color de color-picker.

highlight-selected

Este plugin añade una funcionalidad que parece increíble que no venga ya por defecto en el propio core de Atom. Simplemente con hacer doble clic en una palabra en el editor nos resaltará esa palabra y todas las ocurrencias adicionales de la palabra en el resto del archivo que tengamos abierto.

Funcionamiento del plugin highlight-selected.

Funcionamiento del plugin highlight-selected.

Si eres programador, te irá genial instalarlo para ver dónde aparecen variables o funciones.

goto-definition

Otra de las funcionalidades de Eclipse que más hecho en falta es el típico CTRL+click que encima de una función, objeto o clase te lleva directamente a su definición. Aunque no es perfecto, lo mejor que he encontrado y que uso a diario para moverme por el código es este plugin.

Navegación entre archivos mediante el plugin goto-definition.

Navegación entre archivos mediante el plugin goto-definition.

Tienes que poner el cursor encima de lo que quieras buscar (el nombre de una función, por ejemplo) y hacer Alt+Cmd+Enter. Esto te lleva a la definición o bien abre un diálogo flotante en caso de que el plugin encuentra varias ocurrencias y no tiene claro cuál es la que estás buscando. Una vez la seleccionas, vas a la definición.

git-plus

Este plugin integra el control de versiones con Git dentro de tu editor Atom. De esta forma podrás hacer todo lo que haces con Git habitualmente sin tener que ir al terminal.

Funcionamiento de git-plus en Atom.

Funcionamiento de git-plus en Atom.

He de decir que aunque al principio sí que lo usaba más, últimamente acabo tirando del terminal para gestionar los cambios con Git en vez de usar el plugin en Atom. Tengo pendiente volver a darle una oportunidad porque funcionaba muy bien.

git-time-machine

Otro plugin que he ido dejando de usar aunque sigo teniendo instalado es git-time-machine. Tengo también pendiente recuperarlo y usarlo con más frecuencia.

Funcionamiento de git-time-machine.

Funcionamiento de git-time-machine.

Dado un archivo cualquiera dentro de un proyecto controlado por Git, podrás ir hacia atrás en el tiempo para ver los cambios que ha ido teniendo. Incluye una barra horizontal con la linea de tiempo y los cambios. Muy útil cuando quieres ver modificaciones pasadas en tu código.

merge-conflicts

Si utilizas Git habitualmente y trabajas con otros desarrolladores, seguro que te has encontrado en situaciones en las que tu código tiene conflictos con la versión más actualizada en el servidor compartido.

Funcionamiento de merge-conflicts en Atom.

Funcionamiento de merge-conflicts en Atom.

Arreglar estos conflictos es un rollo, y no podrás subir tus cambios hasta que no los resuelvas. Por suerte, merge-conflicts te proporciona asistencia en esta labor haciendo que el proceso sea mucho más visual y sencillo. No dudes en probarlo.

todo-show

Muchas veces dejas en tu código ciertos comentarios para tu yo del futuro. Y claro, es posible que te olvides de ellos. Por suerte, podrás instalar el plugin todo-show que abre un panel en Atom con todos los comentarios que encuentra y contienen las palabras TODOFIXME, etc.

Vista del panel que incluye el plugin todo-show.

Vista del panel que incluye el plugin todo-show.

De esta forma, antes de lanzar tu código al público siempre puedes hacer un repaso y ver si te dejaste algo pendiente de arreglar.

linter

Como desarrollador Java en Eclipse, me encantaba cada vez que el editor era más inteligente que yo y me marcaba los errores que iba detectando a la vez que yo programaba código. Es una funcionalidad increíble que, además, reduce los errores a la mínima expresión.

En Atom, el equivalente que mejor me funciona es linter. Se trata de un plugin que añade control y visualización de errores en el propio editor. Y aunque no lo detecta todo, nos ayuda bastante.

Resaltado y control de errores con linter en Atom.

Resaltado y control de errores con linter en Atom.

Además del plugin linter básico, en mi instalación tengo las siguientes extensiones de linter para Atom:

atom-beautify

Este plugin hará que tus archivos se vean más bonitos y sean más legibles ya que se encarga de controlar que su indentación sea correcta. Es decir, que las líneas de código estén bien ordenadas y que empiecen en el lugar que toca. Es especialmente útil para seguir las guías de estilo en archivos que tienen múltiples bucles o funciones que llaman a funciones. Además, soporta la mayoría de lenguajes que puedes usar hoy en día para programar.

atom-ternjs

Por último, otra funcionalidad que hoy en día queda por resolver bien en editores como Atom es el tema del autocompletado mientras programas. Además de hacer que seas más eficiente como programador, si dispones de autocompletado mientras escribes tu código es más fácil evitar errores.

En mi caso, la mayoría del código que suelo escribir en Atom es JavaScript, por lo que instalé el plugin atom-ternjs que se encarga del autocompletado. No es perfecto, pero es mejor que nada 😉

Bonus: atom-2048

Si te quieres distraer un rato del trabajo, aquí tienes un plugin que te permite jugar al popular juego 2048 dentro del editor Atom. Ten cuidado que engancha 😉

Jugando al 2048 desde el propio Atom. ¡Que no te pille tu jefe!

Jugando al 2048 desde el propio Atom. ¡Que no te pille tu jefe!

 Emmet

Aunque algunos puedan conocerlo por su antiguo nombre (Zen Code), Emmet se ha convertido en un plugin esencial. Si tuviéramos que elegir el primer plugin a instalar, posiblemente sería este. Con Emmet se gana mucho tiempo a la hora de escribir código, ya que se pueden utilizar abreviaturas para las etiquetas o crear clases simplemente escribiendo p.parrafo y pulsando tabulador. En este caso obtendríamos un párrafo con la clase “parrafo”. También podemos ahorrarnos escribir todo lo necesario para hacer una página HTML nueva escribiendo en el editor html:5 y pulsando tabulador.

EMMET en Atom Editor

EMMET

Javascript Snippets

Este plugin permite escribir código JavaScript usando abreviaturas definidas, por lo que no es necesario escribir todas las palabras del código. Si queremos poner un console.log por ejemplo, basta con escribir cl, o picar gi para el comando getElementById . Tiene rasgos de la funcionalidad de Emmet, pero en este caso se ejecuta con código JavaScript. Se puede utilizar este paquete con funciones, la consola o los ciclos, entre otros.

Resumen final

Bueno estos son los plugins que yo uso y que pienso que son indispensables para cualquier desarrollador web. Espero con esto abrir los ojos a la gente que está cegada con el sublime. A mí el simple hecho que sublime requiera de una versión de pago aunque lo puedas usar igual sin pagar ya me resulta una molestia y Atom es gratis y totalmente personalizable.

Si tú también usas Atom y crees que me he dejado algún plugin más que para ti es imprescindible, déjame un comentario. Estoy seguro de que así completaremos la lista con cosas muy interesantes.

En la entrada de mañana hablaré de como convertir tu Atom como si fuera sublime para aquellos que le guste el formato de sublime y quieran probar con Atom.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

es_ESSpanish
es_ESSpanish