Ya he hablado anteriormente de las características de Atom, pero sin duda su gran atractivo reside en los packages o los también conocidos plugins o extensiones. En la actualidad Atom dispone de más de 4150 packages, ofreciendo un sinfín de posibilidades y nuevas características que hacen de Atom un digno rival para Sublime Text. He realizado una pequeña selección de plugins “imprescindibles” que todo desarrollador Front-End debería tener instalado.
Instalar plugins para Atom
Hay varías formas de instalar plugins en Atom, a través de consola de comandos o mediante el propio Atom. La más sencilla e intuitiva es hacer uso de administrador de plugins que incorpora el propio Atom. Puedes acceder en File > Settings > +Install
No te extrañes si ves plugins instalados, Atom ya viene con un conjunto de plugins pre-instalados, por ejemplo: TimeCop que revisa los tiempos de carga de Atom y sus componentes. Comencemos…
csscomb-atom
https://github.com/jchouse/csscomb-atom
Permite formatear/reordenar el código para CSS (LESS, SASS, SCSS). Este plugin lo venía utilizándolo en Sublime Text y me resulta imprescindible, no tengo que preocuparme si he tabulado correctamente, con una simple combinación de teclas el código CSS quedará limpio y ordenado. Decir que no es una ordenación alfabética, sino que sigue unas directrices específicas para obtener un mejor procesado por parte de nuestro navegador. Los beneficios:
- Estilo homogéneo (Imprescindible trabajo en grupo)
- Facilita la lectura del código
- Previene de errores accidentales
project-manager
https://atom.io/packages/project-manager
Atom permite añadir un directorio de trabajo al proyecto, pero carece de capacidad para gestionar más de un proyecto de forma “simultánea”. Podemos subsanar esta deficiencia con este plugin permitiéndonos saltar de un proyecto a otro con una simple combinación de teclas.
minimap
https://atom.io/packages/minimap
Lo cierto es que al principio pensaba que no le daría mucho uso, pero cuando tienes ficheros muy largos y tienes en cierto modo memorizada la estructura del mismo, el mini-mapa te sirve como referencia y puedes llegar dónde quieras en un clic sin necesidad de estar haciendo scroll por interminables líneas de código.
pigments
https://atom.io/packages/pigments
Muestra exactamente que color estás representando en hexadecimal, rgba, o directamente con variables. Evalúa todos los ficheros del proyecto y proyecta una paleta de colores temporal con la que trabaja. Tiene muchas opciones de configuración.
highlight-selected
https://atom.io/packages/highlight-selected
Te permite visualizar de forma rápida si el texto que tienes seleccionado se repite en alguna otra parte del código. En muchos casos no salvará de hacer una búsqueda (Ctrl + F). Su autor reconoce que parte de su código se basa en la funcionalidad de búsqueda del propio Atom.
linter
https://atom.io/packages/linter
Parar mi, el plugin por excelencia. Me atrevería a decir, que por este plugin cambié de Sublime Text a Atom. Si bien es cierto que Sublime Text permite el uso de linters, su cofiguración es muy laboriosa comparada con Atom. Los linters permiten detectar errores estrucutales en el código. Tienes un listado de los lenguajes soportados aquí.
color-picker
https://atom.io/packages/color-picker
Permite configurar el color a partir de formatos ya conocidos (HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 y VEC4) o realizar conversiones. Además es compatible con variables Sass y LESS.
dockblockr
https://atom.io/packages/docblockr
Este plugin te permite documentar proyectos/funciones/código ofreciendo varias alternativas dependiendo el bloque que vayas a comentar. Ni que decir que documentar el código es imprescindiblen.
file-icons
https://atom.io/packages/file-icons
Para muchos es posible, que este plugin no sea imprescindible. Pero a mi me facilita el día y día, ofreciendo multitud de iconos para cada una de las extensiones de los ficheros que tengamos en nuestro proyecto.
todo-show
https://atom.io/packages/todo-show
Este plugin hace uso de los comentarios para introducir marcas especiales en el código: TODO, FIXME, CHANGED…etc. Resulta de gran utilidad, ya que si a lo largo de una tarea has encontrado errores que no puedes corregir en ese preciso instante, puedes añadir un comentario “FIXME” y gracias a su panel de control encontrar todas las coincidencias “FIXME” en tu proyecto.
w3c-validation
https://atom.io/packages/w3c-validation
Lo tengo desactivado por defecto, y lo activo si quiero comprobar la validación con W3C. El plugin se puede configurar para que valide después de la guarda de cada fichero, pero aún así consume bastantes recursos.
Conclusiones
Con estos plugins trabajo diariamente, y si bien es cierto que no son muchos, en ciertas ocasiones tengo la sensación que Atom empieza a resentirse un poco. Creo que en este sentido Sublime Text ofrece un mejor rendimiento.
¿Conoces algún plugin interesante?