Atom editor

Escoger el editor que vas a usar para programar no es una decisión sencilla. Afortunadamente, hoy en día tienes muchas alternativas disponibles para elegir.

He de decir que en mis inicios como desarrollador en Java siempre fui un fan de Eclipse como entorno de desarrollo (lo sé, muchos lo odiáis). Y es que aunque es una herramienta bastante pesada y consume muchos recursos del sistema, todo lo que te proporciona en cuanto a ayudas a la programación para mí claramente compensa.

Al dar el salto al desarrollo web en general y de plugins para WordPress en particular pasé un tiempo buscando alternativas a Eclipse. Estuve probando Sublime, pero tuve muchos problemas para mantener una configuración que funcionara sin problemas cada vez que había una actualización. También usé PHPStorm y la verdad es que la experiencia fue buena, pero su interfaz en Mac OS X no acababa de convencerme (aunque he de decir que es lo más parecido a Eclipse que encontré).

Finalmente di el salto a Atom, con el que estoy bastante contento. De hecho, todas mis aportaciones al desarrollo de nuestro plugin Nelio Content las he hecho desde este editor, incluyendo todo el código en Node.js de la parte servidor de Nelio Content que corre en el cloud de Amazon.

Captura de pantalla de Atom.
Captura de pantalla 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.

Y hablando de plugins, os dejo una lista de los más interesantes que tengo instalados y uso habitualmente para mis desarrollos. ¡Tomad nota!

Los plugins para Atom más recomendables

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 TODO, FIXME, 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!

Resumen final

El editor Atom es mi editor de texto para programar favorito a día de hoy. Tienes un montón de plugins disponibles y es bastante estable. Sin embargo, siempre hay cosas que podrían mejorar. En concreto, me sigue faltando la posibilidad de tener un panel con el listado de funciones que hay definidas dentro de un archivo. Esto es algo que hecho de menos desde que dejé Eclipse, y aún no he encontrado un editor que lo solucione bien. Recientemente encontré un plugin para Atom que lo hace, pero su calidad es pésima.

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.

Imagen destacada de Atom.

60 respuestas a «Plugins para Atom imprescindibles para todo desarrollador web»

  1. Avatar de Norman
    Norman

    ¿Qué plugins crees que son buenos para manejar WordPress?

    1. Avatar de Antonio Villegas

      ¡Hola Norman! Pues para WordPress puedes mirarte los que salen en la búsqueda en la web de Atom aquí. Como verás, no hay mucha cosa específica, pero bueno, con los genéricos para PHP o JavaScript es suficiente.

  2. Avatar de Fernando Villegas
    Fernando Villegas

    Recién hoy me he cambiado a Atom en mi inicio en la programación y encontré, este tu post muy interesante y completo, gracias por dedicar tiempo a compartir tu conocimiento.

    Añadida tu pagina a mis favoritos, saludos y un abrazo desde Mexico.

    1. Avatar de Antonio Villegas

      Gracias Fernando por tu comentario. Por cierto, que gran apellido tienes ?

  3. Avatar de Cristopher
    Cristopher

    ¡Hola Antonio!

    Recien me acababa de cambiar a ATOM, y tus post me parecio muy util, gracias no me habia atrevido a dar este gran paso en mi carrera de desarrollador.

    1. Avatar de Antonio

      ¡Me alegro! Yo estoy bastante content con Atom.

  4. Avatar de Elisur
    Elisur

    Gracias Antonio, ayer me pasé a Atom por la presión de mis compañeros jeje y con estos plugins me veo más convencido.
    Un saludo.

    1. Avatar de Antonio Villegas

      Me alegro de que te haya servido la entrada. ¡Un saludo!

  5. Avatar de Daniel
    Daniel

    Hola Antonio, saludos y gracias por tu aportación, actualmente uso tanto sublime text 3 como Atom, ambos me encantan, los encuentro muy parecidos. Por cierto como aportación, uno de los plugins que considero indispensable sobretodo a la hora de acelerar el desarrollo es emmet

    1. Avatar de Antonio Villegas

      ¡Gracias Daniel! Si, la verdad es que Emmet es muy util, aunque por el uso que le doy a Atom y lo que programo, no lo uso.

  6. Avatar de Juan Angel
    Juan Angel

    Hola… estuve mirando linter pero no me funciona bien, no se si sea al unico

    1. Avatar de Antonio Villegas

      Hola Juan. ¿Qué es lo que no te funciona bien? Tienes que instalar linter y además los paquetes linter para los lenguajes de programación que necesites.

  7. Avatar de Elvis

    Hola, muchas gracias por el post. Lo tengo marcado en favoritos para nunca perder esta lista tan inprescindible. Aunque te saltaste un plugin: emmet ;D

    1. Avatar de David Aguilera

      Totalmente cierto, Elvis; ¡emmet es un gran plugin!

  8. Avatar de jonathan
    jonathan

    gracias por la Información .. Instalados casi todos los que recomiendas

  9. Avatar de Jorge Augusto
    Jorge Augusto

    A dia de hoy 2018 febrero existe algun plugin que busque referencias como en phpstorm de una clase css a partir de html o buscar la clase de una función? y que tal es el plugin atom ide php??

    1. Avatar de Antonio Villegas

      Hola Jorge. Para lo que comentas, creo que el plugin Go To Definition te puede servir. Sobre Atom IDE, yo lo uso y estoy bastante contento.

      1. Avatar de Jorge Augusto
        Jorge Augusto

        En efecto Go To Definition funciona pero cuando quiero hallar las clases css de un html no funciona parece que no soporta css, less y sass

        1. Avatar de Antonio Villegas

          No, claro. No funciona en CSS y similares. Es para código.

  10. Avatar de Matías|
    Matías|

    Gracias por tus aportes. Estoy iniciandome en el mundo de la programación y uso Linux, los tutoriales que estoy viendo son con Dreamweaver y la verdad es que soy «alérgico» a los programas pagos, no por no valorar el trabajo de sus desarrolladores, sino por mi falta de dinero… jaja!!!

    1. Avatar de Antonio Villegas

      Atom va muy bien. Hay muchos otros, de echo tengo pendiente mirarme Visual Studio Code, que todo el mundo habla muy bien de él. Lo de ser alérgico a los programas de pago, hay que ir quitándoselo eh 😉

  11. Avatar de Yarkos Vasquez
    Yarkos Vasquez

    Hola. Gracias por tu tiempo y explicación. Genial las imágenes animadas, son clarísimas. Saludos.

  12. Avatar de pedro
    pedro

    Hola Gracias por tu aporte muy interesante. Pero hay algun plugin que te relacione o puedas ver una linea entre las etiquetas de inicio y fin como en sublimetext o netbeans.

    Gracias

    1. Avatar de Antonio Villegas

      Si te refieres a los paréntesis/llaves de abrir y cerrar funciones, de forma nativa Atom te marca la pareja cuando te pones encima de uno de estos símbolos.

  13. Avatar de Eduardo
    Eduardo

    Muchas gracias por este aporte, soy nuevo en la programación y estos plugins me ayudan bastante a que todo sea más fácil, gracias por el aporte.
    Un saludo desde Ciudad de México

    1. Avatar de Antonio Villegas

      Gracias a ti por tus palabras, Eduardo.

  14. Avatar de Edwin Saldaña
    Edwin Saldaña

    Simplemente excelente aporte, gracias por tomarte el tiempo de hacer este trabajo muy significativo.

  15. Avatar de Rolando Escobar
    Rolando Escobar

    Excelente aporte saludos desde ecuador

  16. Avatar de Maximiliano Guerrero

    Tengo un problema en atom y no se si se puede solucionar, la cosa es que yo al escibri codigo muy largo en atom o textos se pone una linea infinita que deja la extructura atras y sigue

    Ejemplo:

    Quiero que sea asi
    aaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaa

    Pero atom hace lo siguiente

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    Sigue y sigue y desaparece el codigo de la pantalla

    Algun plugin o configuracion? Gracias

    1. Avatar de Antonio Villegas

      Hola Maximiliano. Mírate la opción ‘Preferred Line Length’ en las Settings de Editor. Ahí puedes cambiar este comportamiento.

  17. Avatar de Raúl
    Raúl

    Fantastico!

    El post que necesitaba para terminar de configurar y lanzarme a usar en serio Atom. ¡Muchas gracias!

  18. Avatar de camilo
    camilo

    hola, hay algún plugin para autocompletar jquery

    1. Avatar de Antonio Villegas

      Aparentemente este debería hacerlo. No lo he probado.

  19. Avatar de roy

    Muy buenos consejos si realmente Atom es el mejor a mi me encanta, me resulta mas practico, ordenado que todos los demas, Muchas Gracias./

  20. Avatar de Jairo Machuca
    Jairo Machuca

    Ya llevo mas de un año usando Atom y para mi es una gran maravilla y ya instale como unos buenos plugin gracias a este blogracias mi amigo.
    Por otra parte con el plugin de atom-beautify al momento de utilizarlo con PHP me da un error que dice que al aparecer no lo tengo activado pero en realidad sii por otro lado el de HTML me lo acepta agradeceria tu ayuda.

    «See php installation instructions at https://github.com/Glavin001/atom-beautify#beautifiers or go to http://php.net/manual/en/install.php
    You can configure Atom Beautify with the absolute path to ‘php’ by setting ‘Executable – PHP – Path’ in the Atom Beautify package settings.
    Your program is properly installed if running ‘where.exe php’ in your CMD prompt returns an absolute path to the executable.»

    1. Avatar de Antonio Villegas

      Hola Jairo. Supongo que este error te sale porque Atom no encuentra el ejecutable PHP. Debes ir a la configuración de Atom para indicarle dónde está PHP instalado, asumiendo que lo tienes instalado, claro. En caso contrario, instala PHP en tu sistema.

  21. Avatar de Giovanni Rodriguez
    Giovanni Rodriguez

    ey! gracias por el contenido voy en 4 semestre de ingenieria y estoy apasionado !!!

  22. Avatar de Ricardo
    Ricardo

    Esto es lo que echabas en falta?

    https://atom.io/packages/symbols-tree-view

    Espero que os sirva 😉

    Gracias por el contenido, me fue genial.

    1. Avatar de Antonio Villegas

      Algo así. Ahora uso VS Code y muy contento.

  23. Avatar de edgard
    edgard

    hola, gracias por aporte! ayuda bastante, con que plugin puedo ver los enlaces llamados de ciertas funciones para ver que otros archivos llama
    saludos

    1. Avatar de Antonio Villegas

      Hola Edgard. No acabo de entender tu pregunta.

  24. Avatar de Fernando Castelblanco
    Fernando Castelblanco

    Hola, resulta que intento realizar una sencilla división en atom Print (59/60) y el resultado es 1. aproximandolo. Alguien me puede indicar por favor como hago para que me salgan todo el valor correspondiente en decimales. 0.98333333 (son principiante, 3 días estudiando Python con Atom como mi editor de códigos)

    1. Avatar de Antonio Villegas

      Hola Fernando. Este no es el lugar más oportuno para realizar consultas de Python. De todos modos, parece un tema de que te está convirtiendo a entero un valor decimal. Busca por ahí que seguro que encuentras la respuesta.

  25. Avatar de Efrain Acuña
    Efrain Acuña

    Buenos días, en esta época de cuarentena retome el tema con Atom,
    como puedo recuperar proyectos viejos que realice con Atom?

    1. Avatar de David Aguilera

      Atom es simplemente un editor y, como tal, lo único que permite es editar ficheros de texto (puede haber algún matiz según los plugins que hayas instalado, pero la esencia es esa). Por lo tanto, si quieres editar proyectos del pasado, tendrás que buscarlos en tu ordenador y abrirlos desde Atom. Si no están ya en tu PC, tendrás que descargarlos primero del repositorio SVN o Git que uses.

  26. Avatar de Judit
    Judit

    Hola, muchas gracias por tus aportaciones, soy nueva en Atom y me han venido muy bien. Antes utilizaba Visual Studio Code y tenía la opción con cmd-z que me adaptaba el ancho del texto según tuviera mi pantalla. En atom he encontrado el flow con cmd+alt+q pero no me sirve, sabes si hay otra forma de adaptar el texto?

    Muchas gracias,

    Saludos,

    1. Avatar de Antonio Villegas

      Pues he de decirte que me he pasado a Visual Studio Code desde hace ya un tiempo, así que he dejado Atom atrás 😀

  27. Avatar de Ricardo Posada
    Ricardo Posada

    Hola, Antonio. Ya veo que te has pasado a VS Code, pero quería hacerte una pregunta sobre Atom, y te agradecería si me puedes echar una mano. Tengo varias páginas web (proyectos) y trabajo alternativamente en unas y otras. Hasta hace poco trabajaba con Dreamweaver y allí podía configurar cada proyecto individual e independientemente una única vez, y cuando hacia cambios en un archivo cualquiera y quería subir los cambios al servidor bastaba teclear Ctrl + Shift + U, y automáticamente el programa detectaba el proyecto al cual pertenecía el archivo y lo actualizaba. Soy nuevo en Atom y he descargado los paquetes remote-ftp y multiple-remote-ftp, pero veo que con ellos sólo se puede tener configurado un ftpconfig, con lo cual cada vez que cambio de proyecto tengo que sobreescrbir el mismo ftpconfig con los datos del respectivo proyecto o sitio web. No sé si me he explicado con claridad, pero te agradecería si sabes la forma de configurar diversos ftpconfig.

    1. Avatar de Antonio Villegas

      He buscado rápidamente y he encontrado esto: https://atom.io/packages/multiple-remote-ftp

      No se si te va a servir, pero es posible que si. Ya nos contarás.

  28. Avatar de Ricardo Posada
    Ricardo Posada

    Hola, de nuevo, Antonio. Gracias por tu respuesta. Como te mencioné en mi pregunta, ya había probado con ese paquete, pero no me había funcionado. De todas maneras ya encontré la solución, y la dejo aquí, por si le sirve a alguien: el archivo .fptconfig que configura Atom es el del primer proyecto que hay en el árbol de Proyectos, por lo tanto, lo que hay que hacer es configurar e insertar un archivo .ftpconfig en la raíz de cada sitio y, cuando se cambie de proyecto, subir el respectivo proyecto hasta el primer lugar del árbol, y luego sí subir el archivo al servidor mediante Win + Shift + U.

  29. Avatar de Ricardo Posada
    Ricardo Posada

    Hola, de nuevo, Antonio.

    Por curiosidad, y también porque quizás nos ayude a decidirnos a quienes queremos cambiar de editor, ¿podrías contarnos las razones para que al final hayas preferido Visual Studio Code sobre Atom?

    1. Avatar de Antonio Villegas

      La principal es el rendimiento. Atom al instalar paquetes de ayuda a la programación (linting, validación y corrección de errores, etc.) se volvía muy lento y consumía un montón de memoria. Creo que Visual Studio Code está más optimizado en este aspecto. También, disponer de forma nativa del terminal en un panel dentro de VS Code me es muy útil para no tener que cambiar de aplicación cuando quiero aplicar comandos. Pero si te funciona bien Atom, no hace falta que le des más vueltas y cambies.

      1. Avatar de Ricardo Posada
        Ricardo Posada

        Muchas gracias por tu respuesta. Es verdad, con todos los plugins de Atom se ha vuelto muy lento. Lo que pasa es que con Visual Studio Code nunca me sentí cómodo del todo. Creo que seguiré buscando y, de momento, continuaré con Dreamweaver. Un saludo.

  30. Avatar de Fernando Ulloa
    Fernando Ulloa

    Hola Antonio! muy bueno el aporte, mira soy nuevo en el mundo de la programación y estoy con ATOM, hay algún plugin para hacer una captura de pantalla al trabajo que estas haciendo? y después como puedes saber si estas haciendo bien el trabajo. Saludos

    1. Avatar de Antonio Villegas

      Hola Fernando. Las capturas de pantalla las haces mediante la funcionalidad que ya viene con tu sistema operativo. Y si lo que haces funciona, entonces sabrás que has hecho un buen trabajo.

  31. Avatar de eduardo villegas
    eduardo villegas

    eduardo villegas. es primera vez que voy a usar atom y me extraña no tengas emmet, bueno como dices, no lo usas para trabajar en lo tuyo. un saludo desde venezuela. otro villegas jajajaja

  32. Avatar de Santiago
    Santiago

    Que bueno el Beutify! Con este plugin definitivamente me quedo en Atom. Muchísimas gracias

Deja una respuesta

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

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.