usar editor atom

6 Increíbles Extensiones De Atom Para Desarrolladores Web

Encuentra en el sitio

Últimos Artículos

¿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

.

emmet para atom

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

fileicons para atom

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 😀

 

Resumen
Fecha Publicación
Resumen articulo
Conoce algunas increíbles extensiones de Atom para desarrolladores web. Mejora tu código y disfruta de las diferentes funciones que te brindan estas extensiones.
Calificación
51star1star1star1star1star
  1. Avatar for belial9826 pedro dice:

    hola, buen articulo, felicitaciones. Yo tengo una pregunta, cuando se abren muchos archivos no se como navegar entre los archivos, solo se ven los que alcanzan a quedar en el ancho de la ventana pero los demás quedan ocultos, como navego o listo los archivos abiertos? Gracias si alguien sabe como hacerlo directamente o con un plugin.

  2. Avatar for belial9826 juan dice:

    muy buen post quisiera saber si hay un paquete que haga la vista previa en tu navegador y no estar actualizando cada momento antemano gracias 🙂

    1. Avatar for belial9826 Sanders Gutiérrez dice:

      El plugin que buscas se llama livereload, espero te sea de ayuda
      Para ATOM: https://atom.io/packages/livereload

    2. Avatar for belial9826 Kev dice:

      Hola Juan, se llama Atom-Live-Server

      Slds.

  3. Avatar for belial9826 leo dice:

    muy buen post ojala puedas subir mas de este tipo saludos y gracias 🙂

  4. Avatar for belial9826 DMoZ dice:

    Gracias, estoy aprendiendo sobre atom y este tipo de ayuda me viene excelente …

    De casualidad sabrás si es posible colocar atom en español ? …

    Saludos …

Deja un comentario