6 Increíbles Extensiones De Atom Para Desarrolladores Web

¿Has probado Atom? Aunque es bastante nuevo, muchos han empezado a amar este un editor de texto hecho por GitHub, el cual ofrece muchas ventajas y sobre todo es gratuito para usarlo 😉 Atom viene con un par de paquetes integrados, como la integración con Git y de vista de árbol. Sin embargo, para el desarrollo necesitaras algunos paquetes adicionales para mejorar esta herramienta.

En este post se mostrará algunos paquetes que un desarrollador web debe tener instalado. Algunos son grandes para ayudar a organizar su código desordenado, otros para ayudarle a tener un mejor acceso a sus archivos sin salir de Atom. A continuación te compartiré 6 extensiones de Atom para desarrolladores web, que a mi parecer son increíbles 😀

Emmet

Emmet es un plugin que es necesario instalar, sea cual sea su editor de texto favorito. Las principales características de Emmet, como el uso de abreviaturas para las etiquetas, te permiten trabajar con rapidez al escribir sintaxis de HTML, CSS, Sass / SCSS y LESS. Por ejemplo, en HTML, escribir  p>a.mylink y luego pulsar la tecla TAB para obtener una etiqueta HTML completa

.

Minimap

Si estás acostumbrado a usar Sublime Text, puedes estar familiarizado con el mini vista previa en la ventana del lado derecho. Esa característica es útil para desplazarse rápidamente a través de los códigos fuente demasiado largos para la altura de la ventana. Con Minimap, puedes usar la ventana de vista previa en Atom. Puedes incluso ajustar la posición para estar a la izquierda o a la derecha, activar/desactivar destacados de código y mucho más. Minimap incluso viene con algunos plugins para extender su funcionalidad, como un resaltador de color en el editor de código.

Beautify

Beautify organiza el código desordenado y lo vuelve más limpio, y más fácil de leer. Cuenta con un gran soporte para los lenguajes de programación, como HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript,  y SQL. Después de instalar este paquete, debes hacer clic derecho y seleccionar ‘Beautify contenidos del editor’, o por medio de Packages > Atom Beautify> Beautify.

Atom Linter

Atom Linter es la opcion ideal para tener trozos de plugins para los principales lenguajes de programacion, proporcionando la API de alto nivel para los linters de Atom. Hay linters disponibles para JavaScript CoffeeScript, CSS / SASS / SCSS / LESS/ STYLUS, Ruby, Python. En un lenguaje que hay puede ser más de un plug-in disponibles, como JSHint, CSJs y JSXHint JavaScript.

Después de instalar este paquete principal, es necesario instalar el linter específico para el lenguaje con el que estas  trabajando, por ejemplo, si estás en JavaScript y seleccionas JSHint para linter entonces puedes instalarlo ejecutando $ apm install linter-jshint en la Terminal.

File Icons

Este plugin añade iconos para un nombre de archivo basado en el tipo de archivo correspondiente. Se añadirá mejoras visuales al abrir un archivo en una pestaña o en la vista de árbol. Los iconos de los archivos son personalizables: puedes añadir tu propio icono y cambiar el color a través de los archivos de LESS en el directorio packages/file-icons/styles. El icono por defecto viene en 8 colores y 3 variantes (luz, medio y oscuro).

JavaScript Snippets

JavaScript Snippets te permite escribir rápidamente una parte de código fuente de JS. Puedes usar abreviaturas definidas, con lo cual no es necesario escribir palabra por palabra de código, por ejemplo, sólo tienes que escribir cl para usar console.log y gi para el comando getElementById. Esta funcionalidad es similar a Emmet, pero se ejecuta en código JavaScript. Este paquete Atom ofrece muchas de la sintaxis de JavaScript como funciones, la consola, y por supuesto, los ciclos.

Extensiones Extra 😉

Como sé que estas herramientas son de gran utilidad para los desarrolladores, he dejado los plugins un poco mas interesantes de ultimo; a cambio, pido una colaboración compartiendo el articulo en Facebook, Twitter o G+, luego podrás ver las extensiones 😀

[indeed-social-locker sm_list=’fb,tw,li’ sm_template=’ism_template_5′ sm_list_align=’horizontal’ sm_display_counts=’true’ sm_display_full_name=’true’ unlock_type=2 locker_template=3 sm_d_text=’

Desbloquea el contenido con una acción social…

Comparte este articulo y obtén el contenido premium!’ reset_locker=1 locker_reset_after=30 locker_reset_type=’days’ ism_overlock=’default’ ]

CSS Comb

CSS Comb brinda un código con un estilo formateado, dando organización a tu codigo. Después de instalar este paquete, el trabajo de clasificación puede hacerse presionando CTRL + ALT + C o acceder desde el menú de contexto a través de Packages > CSS comb > Comb.

Git Plus

Git Plus te permite trabajar con Git sin salir del editor de Atom 😉 Dentro del editor puedes ser capaz de usar todos los comando que necesitas en Git, como un git commit, check-out, push / pull, diff y otros comandos git. Necesitas configurar tu user.name y user.email en su archivo de configuración git para hacer todas las funciones funcionen. Para acceder a todos los comandos git, abra la paleta con CMD + SHIFT + H o elegir Packages > Git Plus.

Remote Edit

Esta extensión te puede ayudar a ver y editar tus archivos remotos sin salir del editor o con el uso de otras aplicaciones ftp. Para empezar, en primer lugar, debes crear un nuevo host, a continuación, añadir a través de Packages > Remote Edit > Add New Host e introduce los datos de acceso. Ahora puede navegar a los archivos remotos, utilice CTRL + ALT + B para navegar a traves del host registrado y ver los archivos.

[/indeed-social-locker]