10 paquetes atómicos más útiles para desarrolladores web

¿Has probado Atom? Aunque es bastante nuevo, muchos se han enamorado de Atom, un editor de texto creado por GitHub que ofrece muchas ventajas y, sobre todo, es de uso gratuito. Atom viene con algunos paquetes integrados, como la integración con Git y la vista de árbol. Sin embargo, para propósitos de desarrollo definitivamente necesitarás otros paquetes..

En esta publicación, hemos seleccionado algunos paquetes que debe tener un desarrollador web. Algunos son excelentes para ayudar a organizar su código desordenado, otros para ayudarlo a tener un mejor acceso a sus archivos sin salir de Atom. Aquí están tus 10 paquetes imprescindibles de Atom.

Selector de color

Como su nombre lo indica, este paquete le permite elegir colores, y es tan fácil como hacer clic con el botón derecho y elegir "Selector de color". Alternativamente, se puede hacer presionando CMD / CTRL + MAYÚS + C. El Selector de color funciona si su cursor está sobre el texto en archivos CSS / SASS / LESS que contienen uno de los siguientes formatos de color: HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 y VEC4, o variable de color en SASS o MENOS. También tiene la capacidad de convertir entre los formatos..

Hormiga

Hormiga Parece ser un complemento que necesita instalar, sea cual sea su entorno de editor de texto. Las características principales de Emmet, como la ampliación de abreviaturas y el ajuste con abreviaturas, le permiten trabajar rápidamente al escribir sintaxis HTML, CSS, Sass / SCSS y LESS. Por ejemplo, en HTML, escriba p> a.mylink luego toque la tecla TAB para obtener una etiqueta HTML completa

. La hoja de trucos te ayudará a aprender rápidamente la sintaxis de abreviatura de Emmet.

Minimapa

Si está acostumbrado a Sublime Text, puede estar familiarizado con la 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 de origen demasiado largos para la altura de la ventana. Con Minimapa, obtienes esto para Atom Incluso puede configurar la posición para que esté a la izquierda o a la derecha, activar / desactivar los puntos destacados del código, y más. El minimapa incluso incluye algunos complementos para ampliar su funcionalidad, como el resaltador de color..

Embellecer

Embellecer Convierte tu código desordenado más ordenado y más legible. Tiene una gran compatibilidad con lenguajes de programación, como HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript, mecanografía y SQL. Después de instalar este paquete, para ejecutarlo, simplemente haga clic derecho y elija 'Embellecer los contenidos del editor', o via Paquetes> Atom Beautify> Beautify.

Atom Linter

Atom Linter viene como una 'casa' de complementos de linting para los principales idiomas, proporcionando la API de nivel superior para los linters. Hay disponibles linters para JavaScript, CoffeeScript, CSS / SASS / SCSS / LESS / STYLUS, Ruby, Python. En un idioma puede haber más un complemento disponible, como JSHint, JSCS y JSXHint para JavaScript.

Después de instalar este paquete principal, necesita Instala la guía específica para el idioma en el que trabajas., por ejemplo, si está en JavaScript y elige JSHint para linter, puede instalarlo ejecutando $ apm install linter-jshint en la terminal.

Iconos de archivo

Iconos de archivo agregar iconos a un nombre de archivo basado en el tipo de archivo correspondiente. Agregará mejoras visuales cuando abra un archivo en la pestaña o en la vista de árbol. Los iconos de archivo son personalizables: puede agregar su propio icono y cambiar el color a través de los archivos MENOS en el paquetes / archivos-iconos / estilos directorio. El icono predeterminado viene en 8 colores y 3 variantes (claro, medio y oscuro).

Fragmentos de JavaScript

Fragmentos de JavaScript le permite escribir rápidamente una parte del código fuente de JS. Con la abreviatura definida, no necesita escribir código palabra por palabra, por ejemplo, simplemente escriba cl para hacer console.log y soldado americano para getElementById. Esta funcionalidad es similar a Emmet, pero se ejecuta en código JavaScript. Este paquete Atom proporciona muchas de las sintaxis de JavaScript, como la función, la consola y el bucle..

CSS Comb

CSS Comb hace que el código de su hoja de estilo tenga un formato consistente, que se vea limpio y hermoso. Puede usar preferencias de clasificación prefabricadas basadas en Yandex, Zen o CSSComb, o incluso puede usar sus propias preferencias para hacer reglas de clasificación. Después de instalar este paquete, el trabajo de clasificación se puede hacer presionando CTRL + ALT + C o accediendo desde el menú contextual a través de Paquetes> CSS comb> Comb.

Git Plus

Git Plus Te permite trabajar con Git sin salir del editor Atom. Dentro del editor, puede realizar un comando Git commit, checkout, push / pull, diff y otros comandos de git. Necesitas configurar tu usuario.nombre y usuario.email en su archivo de configuración de git para hacer que todas las funciones funcionen. Para acceder a todos los comandos de git, abra la paleta con CMD + MAYÚS + H o elija Paquete> Git Plus.

Edición remota

Edición remota lo ayuda a ver y editar sus archivos remotos sin salir del editor o con el uso de otras aplicaciones ftp. Para comenzar, primero cree un nuevo host, luego agregue a través del menú Paquetes> Edición remota> Agregar nuevo host e inserte su información de inicio de sesión. Ahora puede navegar a sus archivos remotos, usar CTRL + ALT + B para navegar por el host registrado y ver los archivos.