Dev Tuts, Developer, Geekologia

Plugins Esenciales para un Front-End Developer Novato en ATOM (Lista Personal)

developer tools

Si eres uno de los que esta iniciando en el mundo del desarrollo Front-End o ya tienes rato de haber iniciado en este mundo y quieres mejorar un poco la forma en que desarrollas o aprendes, espero este post pueda ser de mucha ayuda, en el te mostrare una pequeña lista de plugins que suelo usar en Atom, y que me han sido muy útiles en el poco tiempo que tengo aprendiendo Front-End y que de verdad no puedo vivir sin ellos (Muy dramático, pero es culpa de que soy medio Newbie jejejeje).

Cabe dejar en claro que cada uno de los plugin expuestos en la siguiente lista son para el editor de codigo Atom en especifico, puede ser que tambien tengan versión para otros editores, pero yo en este articulo voy a enfocarme en Atom solamente.

Las oportunidades grandes nacen de haber sabido aprovechar las pequeñas.

Bill Gates
Captura de pantalla de Atom

En esta lista hay de todo un poco en lo que a mi parecer respecta, algunos plugin enfocados en el diseño o que te ayudaran en ello, otros en buenas practicas de desarrollo, otros te ayudaran a corregir errores de escritura, así que espero que esta lista sea de mucho beneficio para ti, vamos manos a la obra:

Emmet

Emmet es un plugin para Atom que viene a mejorar tu vida con el desarrollo web, ya que te facilita el acceso a snippets (porciones de código prefabricados) usando abreviaciones para su invocación y con esto mejorando en gran manera tu Workflow, también es 100% configurable para que lo adecues a tus necesidades.

Instalación de Emmet

Si quieres saber un poco mas sobre las abreviaciones te recomiendo que te des una pasada por su documentación.

File Icons

File icons nos va ayudar visualmente a la identificación de los tipos de archivos que usamos en nuestros proyectos, por ejemplo cuando es un JS, un HTML y un CSS entre otros muchos mas, este plugin les asignara un icono de identificación dentro de Atom, para primero que se vea muy bien y para que pueda identificarse rápidamente el tipo de fichero.

Instalación File Icons

Open Recent

Si te gusta apenas abres tu Atom acceder a los proyectos que estabas trabajando recientemente, como sucede en muchos programas de edición, como photoshop, Blender, gimp entre otros, este es el plugins que necesitas, te muestra tanto las carpetas recientes donde has trabajado como los archivos tambien.

Instalación Open Recent.

Mini Map

Esta es una funcionalidad que podemos encontrar en el editor Sublime Text, que ademas es muy útil cuando estamos trabajando archivos bastante largos y necesitamos saber donde estamos ubicados, esta opción también esta disponible mediante plugin en el editor Atom.

Pigments

Este plugin es completamente útil cuando estas definiendo colores ya sea en Hexadecimal o en RGB, ya que te puede mostrar en el editor el color que esta quedando en tiempo real, así de una sin tener que recargar sabes que color es el que estas configurando para tu proyecto.

Color Picker

Ya en el plugin anterior hablamos sobre pigment un plugins que te colorea el código de acuerdo al color especificado, ahora si quieres un poco mas de control o una manera mas interesante para seleccionar el color mientras desarrollas, entonces este plugin te va a dar esa versatilidad, sumándole a al experiencia de usuario mientras desarrollamos.

Highlight Selected

Esto plugin es muy interesante y la verdad me parece muy triste que no venga por defecto dentro del editor, la verdad los chicos detrás de Atom se la deberían pensar, ahora la función de este plugin es resaltar una variable o palabra dentro de tu codigo, pero te la resalta la cantidad de veces que se repite en el mismo, esto nos puede ayudar al momento de corregir errores y buscar esas variables y ver donde mas se repiten o las usamos.

Auto-close HTML

Esta es la que no podia faltar, es que estar cerrando etiquetas de HTML puede ser en mi caso molesto, prefiero para mayor eficiencia que el programa me las cierre y como esta opción no esta por defecto en Atom, entonces tenemos este plugin que nos va ayudar a autocerrar las etiquetas en HTML.

Atom Beautify

Si quieres ayudarte un poco en como se ve tu código a la hora de la lectura, que se vea mas legible, Indentación adecuada en todo tu código, haciéndolo que se va mas hermoso y mejor organizado, reitero esto es con el fin de apoyarte mas que nos se vuelva de uso contante, que sea por un no te alcanzo el tiempo para organizarlo, pero no pierdas estas practicas, la buena escritura es necesaria y mas para un desarrollador.

Antes
Después

Linter

Para terminar esta lista un plugin que será un apoyo impresionante en evitar que se comentan la mayor cantidad de errores posibles, algun punto y coma que se te escapo, algunas errores de sintaxis, entre otras cosas Linter es la herramienta que puede ayudarte en este proceso y ademas, a medida que te corrige o te muestra los errores que tienes debes tener en cuenta que esto también se convierte en un aprendizaje, así que si estas comenzando con el desarrollo web, te va a venir de perlas este plugin.

Linter en Acción

Este es el plugin base, ahora para os lenguaje tambien existe su paquete de Linter en Atom, y en la siguiente lista te listo los que para mi son interesantes:

Conclusiones

Los plugin en Atom nos pueden alegrar la vida y tambien generarnos algunas malas costumbres, pero la verdad es que nos facilitan mucho el trabajo del desarrollo, se que muchos de ustedes conseguirán aun mas plugin interesantes en la base de datos de Atom, pero yo con estos me siento bastante bien, déjame en los comentarios cualquier plugin interesante que consigas.

Espero que esta lista pueda ayudarte si estas iniciando en el desarrollo web y tal vez si ya tenias rato y no conocías de estos plugins para Atom, así que “Happy Coding” y nos vemos en el próximo articulo.

Published by Canopart

Diseñador Visual, Geek, Fundador de Canolabs Agency, apasionado por la tecnología y el diseño, un soñador y formador nato, con un gusto enorme por el desarrollo Front End y el desarrollo de aplicaciones bajo macOS, no soy un Faboy de Apple pero me gustan sus productos.

Leave a Reply

Your email address will not be published. Required fields are marked *