Paquetes de Atom que aumentan su funcionalidad como editor para diseño gráfico.
Antes de nada os pondré en situación, no me considero un front developer. Los paquetes que muestro en este tutorial, son simplemente los que a mí me han ayudado en mis escarceos como diseñador.
Para los que no conozcáis Atom, se trata de un editor de código de Github (software libre) que, entre otras cosas, se le pueden instalar paquetes que le otorgan “superpoderes”. La integración de estos paquetes es muy sencillo, ya que, está integrado con Github.
Una vez descargado Atom, vamos a vitaminarlo. La instalación de estos paquetes se realiza a través de la sección de «ajustes > paquetes» de la propia herramienta. Simplemente con realizar la búsqueda de los paquetes que enumerare es posible instalarlos.
Color Picker
https://github.com/thomaslindstrom/color-picker
Este paquete permite cambiar colores de una forma muy sencilla. Muestra los colores en varios formatos: HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4. Dispone de un acceso directo que podemos personalizar.
Less Compiler
https://github.com/Azakur4/less-compiler
En este caso me centraré en LESS, ya que es lo que habitualmente manejo. El paquete LESS Compiler es muy completo para poder compilar y crear CSS. Si tu estructura de archivos requiere importaciones por la dependencia de estos, LESS Compiler está pensado para ello. Simplemente con añadir una línea a tus archivos LESS, cada vez que hagas cambios en archivos dependientes estos se actualizarán y se actualizará el CSS. Además cuenta con la opción de crear un CSS minimizado y con notificación de errores, muy adecuado para saber que clase te has dejado sin cerrar ;).
Open in a Browser
https://atom.io/packages/open-in-browser
Se trata de una herramienta que Atom no trae por defecto y que este paquete incluye de forma muy elegante. La instalación de este paquete te permitirá lo que su nombre mismo indica: abrirlo en un navegador. A pesar de que hay varios paquetes que cumplen esta función, creo que este es el que menos funcionalidades tiene, pero que tiene las funcionalidades necesarias. Hace una cosa pero la hace bien.
Pigments
https://github.com/abe33/atom-pigments
Un paquete que le viene como anillo al dedo al color Picker. Con Pigments serás capaz de ver el color que estás indicando a través de código de forma visual, esto es, te pintará el color encima de código. Muy útil para poder ver la evolución de colores entre degradados y tonalidades de un mismo color.
En sus ajustes podrémos fijar el tiempo de respuesta del color fijado por código, autocompletar el color o incluir la posibilidad de completado de colores en base a variables, muy usado en LESS. También ofrece la posibilidad de unir colores duplicados.
Auto ident
https://atom.io/packages/auto-indent
Tener un código ordenado e identado hace que sea más fácil de leer. Este paquete te lo hará más sencillo. Carece de ajustes.
Auto close
https://atom.io/packages/autoclose-html
Al igual que el paquete anterior, hace lo que dice. Son dos paquetes que bien podrían estar incluidos entre los paquetes de la versión inicial. Tiempo al tiempo.
