Plugins para Atom imprescindibles para todo desarrollador web

Publicada en WordPress.

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.

FlojaNo está malBienMuy bien¡Impecable! (14 votos, promedio: 4,71 de 5)
Cargando…

40 comentarios en «Plugins para Atom imprescindibles para todo desarrollador web»

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

    1. ¡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. 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.

  3. ¡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.

  4. 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.

  5. 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. ¡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. Hola… estuve mirando linter pero no me funciona bien, no se si sea al unico

    1. 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. 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

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

  9. 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. 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

  10. 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. 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. Hola. Gracias por tu tiempo y explicación. Genial las imágenes animadas, son clarísimas. Saludos.

  12. 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. 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. 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

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

  15. 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. Hola Maximiliano. Mírate la opción ‘Preferred Line Length’ en las Settings de Editor. Ahí puedes cambiar este comportamiento.

  16. Fantastico!

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

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

  18. 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. 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.

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

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

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

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.