Cómo configurar Atom Editor (y sus mejores plugins)

Autor: | Posteado en Trucos Sin comentarios

Hace algún tiempo, escribí esta guía de Sublime Text (que te aconsejo que repases, ya que la totalidad de las funciones que comento se aplican precisamente equivalente en Atom). En dicha guía, hablaba de uno de mis editores de codigo para desarrollo web(www) favoritos: Sublime Text. Sin embargo, con el paso del tiempo GitHub ha mejorado sustancialmente su editor de codigo Atom, un editor open source con el objetivo de convertirse en la alternativa libre de Sublime Text, clonando la totalidad de sus funciones estrella, y mejorándolo en muchos otros aspectos.

Los mejores plugins de Atom Editor

En la actualidad, Atom es el editor que mas utilizo. Hay algunas alternativas atrayentes encima de la mesa, cada una de ellas con sus mejorías e inconvenientes: Atom Editor, Adobe Brackets, Sublime Text y Visual Studio Code son las que creo que merecen los cuatro primeros puestos. Existen otros editores para programar, inclusive si eliges programar en dispositivo de texto, sin embargo personal y subjetivamente, creo que Atom es la alternativa ideal por un sólo detalle: su alta capacidad de personalización. Es cierto que Atom es notablemente mas lento que Sublime Text, sin embargo confío en que sea algo que se vaya solucionando con el tiempo. No obstante, sugiero siempre que cada cliente pruebe cada uno de ellos y saque sus propias conclusiones.

Atom Editor: Versión estable, beta y desarrollo

Recientemente, Atom ha publicado que, de forma parecido a como hace Google Chrome u otros navegadores, ha establecido muchos canales distintos para su editor: un canal beta, un canal estable y un canal de desarrollo. Con esto podremos usar la version que mas nos interese, dependiendo si buscamos estabilidad o las ultimas noticias disponibles.

El núcleo de Atom

Atom esta construido mediante Electron, un framework que maneja NodeJS y Chromium para inventar programas de escritorio, por lo que la propia plataforma esta construída con tecnologias web(www) como HTML y CSS. Esa es una de las deducciones por la que es tan personalizable (y no tan rápida como otras nativas).

El núcleo de Atom: HTML y CSS

Si vamos al menú View / Developer / Toggle Developer Tools o pulsamos CTRL+ALT+I, logramos abrir las tools de desarrollo de Chromium, pudiendo visualizar la estructura interna del programa. Esto es muy interesante, puesto que si tenemos conocimientos de HTML y CSS, en el menú File / Open your stylesheet podremos actualizar una hoja de estilo LESS para personalizar estilos del propio editor y así personalizar su aspecto a vuestro gusto mediante propiedades de CSS.

Los paquetes de Atom, su funcionalidad estrella

Como comentabamos, la mejor característica de Atom es su alta personalización. Practicamente podrias configurar cualquier detalle del editor, que tiene ya una enorme sociedad atras que desarrolla y desarrolla cada vez mas paquetes y plugins para expandir el funcionamiento del software base.

Para investigar e instalar paquetes, sólo tenemos que ir al menú File / Settings / Install y escribir el nombre de lo que queremos investigar en la caja del buscador que nos aparece. A la derecha de dicho buscador apreciaremos que logramos marcar Packages o Themes. En el 1° caso buscaremos paquetes, o lo que es lo mismo, plugins para agregar funcionalidades extra al editor. En el 2° caso estaremos buscando temas, o sea, paquetes diseñados para convertir la apariencia visual del editor.

Actualmente, Atom dispone de mas de 3.500 paquetes (plugins)

Más adelante observaremos que Atom tiene los paquetes categorizados en algunas secciones: Core, que son los paquetes que provienen incorporados de serie, mientras que Community engloba los paquetes que descargamos y que están desarrollados por socios externos a los programadores de Atom.

La filosofía de Atom es tener un editor completamente modular, de modo que si hay alguna funcionalidad de lista del editor que no utilizamos, logramos desactivarla en los paquetes core, y así bajar de trabajo al editor.

Por ejemplo, yo no suelo usar el árbol de directorios de la izquierda, por lo que suelo desactivar paquetes como tree-view o idiomas en los que no programo como language-clojure, language-objective-c o language-ruby-on-rails, entre otros. Observa que podrias desactivar temporalmente (Disable) o desinstalar permanentemente (Uninstall) los paquetes, dependiendo del uso que vayas a darle a dicha característica.

Soporte para lenguajes

Estos últimos paquetes que mencioné en el punto anterior, que empiezan su nombre por language-, son unos paquetes peculiares que incluyen la sintaxis de un idioma de programación para ser identificado por el editor. Atom integra muchos de estos paquetes de serie, como por ejemplo, language-css, language-csharp, language-html o language-java, entre muchos otros.

Soporte de idiomas de programación

Sin embargo, otros idiomas como language-jade, language-latex o language-postcss no provienen incorporados de serie, y pueden instalarse mediante paquetes de la comunidad, que son creados para expandir y agregar mas características.

Una de las funciones que siempre solemos investigar en un buen editor es la función de autocompletado del idioma que estamos utilizando, para así presentarnos consejos al escribir una o algunas letras, por si no recordamos precisamente la frase clave que ibamos a escribir.

Autocompletado de idiomas de programación para Atom

En Atom, es recomendable tener el pack autocomplete-plus para dotar de un motor de autocompletado, y luego, los paquetes del idioma en cuestión, como podrían ser autocomplete-css, autocomplete-python o autocomplete-php, para CSS, Python y PHP, respectivamente.

Themes para Atom Editor

Volviendo a la apariencia del editor, habíamos explicado que en el apartado de instalación de paquetes además teníamos a nuestra disposición una pestaña Themes donde podíamos investigar temas de resaltado de sintaxis o de aspecto gráfico del editor. La instalación es precisamente equivalente que la de un pack (pulsando antes sobre la pestaña Themes, eso sí), y una vez se encuentre instalado, accedemos al menú Themes, 2 mas arriba de Install.

En esta sección observaremos que tenemos 2 apartados para seleccionar el tema recién instalado. Por una parte, UI Theme, que es la apariencia visual del editor, y por otro lado Syntax Theme, que es el esquema de colores de resaltado de sintaxis. Yo utilizo One Dark UI / One Dark Syntax, 2 temas oscuros de Atom, sin embargo, hay temas suficiente atrayentes como An old hope Syntax, inspirado en StarWars, Monokai SETI, Theme Alien Syntax o Material Syntax, entre muchísimas otras. Puedes echar un mirada en la galería de themes de Atom de EnrMarc para percibir algunas de las que podrias encontrar.

Themes para Atom Editor

Otra buena recomendación es personalizar la tipografía que usamos en el editor. Esto puede hacerse desde File / Settings / Editor Settings, en el apartado Font Family. Particularmente, suelo usar la fuente Envy Code R, que es una de mis preferidas, sin embargo si no te convence, podrias instalar el pack fonts que integra algunas fuentes monoespaciadas ideales para programar.

Personalización del interfaz gráfico de Atom

Pero los paquetes de Atom no se limitan sólo a funciones de los idiomas con los que trabajamos, sino que además existen paquetes para agregar o actualizar comportamiento del editor. Por ejemplo, el pack minimap es una característica que logramos echar mucho de menos si venimos de Sublime Text. Se intenta de un diminuto mapa gráfico visual, en el que logramos inventar scroll con el ratón para entrar inmediatamente a una zona del codigo viendo su estructura gráficamente. Es muy personalizable, ya que logramos convertir algunas alternativas desde el apartado Settings en el menú File / Settings / Packages.

Atom Minimap, un diminuto mapa visual rápido

Otros paquetes muy recomendables pueden ser file-icons, que agrega un icono con el formato de archivo en las pestañas del editor para identificarlo rápidamente, open-recent para agregar el menú Abrir archivos recientes que Atom no integra de base, remember-file-positions para recordar la zona donde nos quedamos en un archivo la ultima vez que lo abrimos o zentabs para establecer un máximo de pestañas abiertas, y vaya cerrando las que no usamos desde hace mas tiempo.

Nota: Si teneis problemas con Atom y no responde bien el teclado (por ejemplo, no descubre las llaves { }), podrias instalar el pack keyboard-localization y seleccionar es_ES en sus alternativas para solventar el problema.

Color-picker, un seleccionador de colores

Una de las primeras funcionalidades que suele investigar un diseñador web(www) es un color-picker, un metodo para escribir el codigo de un color rápidamente, sin tener que recurrir a tools externas o programas de layout gráfico. Atom tiene uno muy bueno, que al pulsar CTRL+ALT+C nos despliega un panel gráfico para seleccionar el color, inclusive permitiendo canales alfa de transparencia.

Color-picker para Atom Editor

El plugin nos muestra en la zona inferior el esquema de colores que queremos utilizar, si el formato RGB, el formato hexadecimal, el formato HSL o los formatos HSV y VEC3. También sugiero instalar el pack pigments que se encarga de resaltar en el codigo CSS los fragmentos de codigo de colores con el color correspondiente que se esta utilizando.

Escritura rápida y ordenación de código

Uno de los paquetes esenciales en cualquier editor de codigo es EMMET. Se intenta de un plugin suficiente famoso entre los programadores web(www) y esta habilitada para practicamente cualquier editor de codigo medianamente popular. Con el logramos escribir codigo veloz de una forma muy experiencia y sencilla, aprovechando los conocimientos de CSS.

Si sabemos bien los selectores CSS, logramos utilizarlos y pulsar seguidamente TAB para desplegar inmediatamente diminutos o enormes fragmentos de HTML, como el que se puede visualizar a continuación:

EMMET en Atom Editor

Si deseas visualizar que selectores existen para usar con EMMET, podrias echar un mirada a esta cheatsheet de EMMET. Por otro lado, la indentación de codigo es otro pilar importantísimo para los programadores. Dentro de la jerga de los desarrolladores, se suele denominar «beautify» (embellecer, poner bonito) a la acción de organizar e indentar un codigo mal redactado y «uglify» (afear, poner feo) a la intervención contraria, además llamada «minify» (minificar, disminuir y inventar pequeño) con el objetivo de disminuir su peso.

Con el pack atom-beautify se puede organizar e indentar correctamente un codigo minificado de forma tutorial con un simple clic, o presionando la mezcla de teclas CTRL+ALT+B. También se puede inventar un archivo .jsbeautifyrc para configurar sus multiples opciones.

Atom Beautify: Indentar y ordenar el código

Nuevamente, en el caso de los diseñadores web, otro pack que resultará atrayente es css-comb (algo así como «peinar» el CSS). La intención de este pack es reorganizar el codigo CSS de modo que sea mas sencillo trabajar con él.

Algunas de las actividades que efectua puede ser agrupaciones por categoría —manteniendo propiedades gráficas separadas de propiedades estructurales—, organización del tipo de indentado para inventar mas sencillo su modificación, unificación del estilo de código, etc…

CSS Comb: Reorganiza tu codigo CSS

En su propia página, teneis CSS Comb Online donde podrias efectuar una prueba y visualizar como se comporta con el fragmento de codigo CSS que le facilites en el campo de texto.

Prefijos CSS

Una de las actividades mas frustrantes para los diseñadores web(www) es tener que vigilar las propiedades CSS que requieren prefijos, ya que es algo que puede ir variando a medida que pasa el tiempo y que los navegadores van mejorando. Autoprefixer es una tool que, de forma transparente al desarrollador, se encarga de agregar automágicamente los prefijos necesarios a un archivo CSS, recogiendo la información de Can I Use. De esta forma, nosotros no tenemos que preocuparnos de hacerlo:

Autoprefixer: Olvídate de los prefijos CSS

Sin embargo, hoy en día, lo ideal es trabajar con algún tipo de preprocesador CSS como LESS que nos reporta de algunas mejorías como variables, agrupaciones o mixins, anidamiento de propiedades o funciones peculiares para usar en nuestra hoja de estilos LESS, para despues usar un pack como less-postcss-autocompile, que se encarga de investigar un comentario en la 1ª linea del archivo LESS para que, cada vez que se guarde el archivo, se genere el archivo CSS final preprocesado, empleando autoprefixer, minificado y con el nombre y extensión especificado:

LESS PostCSS: Plugin para producir CSS al guardar LESS

Autoprefixer ahora forma parte de PostCSS, una tool mas termina de preprocesado, donde podrias configurar y usar plugins para multiples tareas, como puede ser usar funciones futuras con CSSNext, producir sprites con postcss-sprites o vigilar que se usen colores de forma coherente sin duplicados con Colorguard.

Utilización de librerías o CDNs

Es muy común que hoy en dia utilicemos multiples librerías o frameworks Javascript o CSS. Es ideal usar CDNs para aprovecharnos de una rapidez de carga rápida, ya que es muy factible que el cliente tenga una librería en el caché del browser si estamos empleando el mismo CDN. Existen paquetes como cdn-libs o cdnjs-atom-extension mediante los cuales logramos insertar inmediatamente las direcciones de estos CDNs que almacenan las librerías seleccionadas:

Atom CDNjs: Incluye las URLs a CDNs de librerías o frameworks

Utilizando estas direcciones de CDNs conseguiremos no sólo liberar vuestro servidor de ancho de banda de librerías, sino además de la oportunidad de usar el caché del browser que puede que almacene ya estos archivos. Recuerda que 2 repositorios CDNs muy recomendables son CDNjs y JSDelivr.

Linters y validadores

Una característica agridulce de muchos editores o IDEs de programación es la utilizacion de linters. Los linters son una especie de validadores, parecido a los correctores de ortografía de los procesadores de texto, sin embargo que van repasando y vigilando el estilo de código que realizamos al escribir codigo de un lenguaje. Con estos sistemas, conseguimos que nos vayan aconsejando sobre vuestro estilo de programación, tratando eludir malas practicas o acciones que puedan desembocar en problemas mas graves.

Para activar estos linters, lo 1° que hay que inventar es instalar el motor linter, parecido a como hicimos con el autocompletado. Posteriormente, logramos suceder a instalar linters para cada lenguaje, como puede ser linter-jshint para Javascript, linter-less para el preprocesador CSS LESS, linter-htmlhint para el idioma de marcado HTML, linter-markdown para el lenguaje de marcado ligero Markdown o linter-php para el idioma de programación PHP, entre muchos otros.

Linter JSHint, un corrector de estilo de Javascript

Los linters suelen ser altamente configurables, ya que algunas veces las consejos que marcan pueden ser intencionadas (por ejemplo, un estilo de programación JS en el que no utilices los puntos y comas finales). Para eludir esto, es factible inventar un archivo .jshintrc con las normas a ignorar.

Otro linter atrayente es linter-doiuse, ya que doIuse acepta sugerir recomendaciones en tiempo real acerca de propiedades o funciones CSS que todavía no soportan los navegadores y es mejor no utilizar. También es factible usar w3c-validation, una extensión de Atom que se encarga de avisarte de los errores de validación que teneis en tu codigo HTML, tal cuál si lo pasaras por el Validator W3C:

W3C Validation: Validar errores HTML directamente desde el editor

Utilizar este pack es un buen ejemplo del método geek, con el que podrias economizar suficiente tiempo evitando validaciones online directamente desde el navegador.

TimeCop: El guardia del rendimiento de Atom

Es muy común que, llegados a este punto, tengas tu editor Atom sobrecargado y colapsado de paquetes que quizas no utilizarás nunca. Es muy significativo que seas consciente de que cada pack que instalas en el editor, puede ralentizar el uso de tu editor Atom, por lo que sería conveniente tener claro que paquetes están afectando a su rendimiento.

Si accedemos al menú Packages / TimeCop / Show, observaremos un panel donde se nos muestra el tiempo que tarda en cargarse Atom, desglosado en algunas categorias y apartados como Startup Time (tiempo de comienzo general), Package Loading (carga de paquetes), Package Activation (activación de paquetes) y lo mismo con los temas:

TimeCop: Vigila que paquetes están perjudicando el rendimiento de Atom

Si nos fijamos, logramos visualizar que nos muestra en azul las cargas rápidas, en amarillo las cargas razonables y en rojo las cargas que tardan demasiado. Estos tiempos de carga no tienen porque ser dilema del usuario, sino que simplemente el pack no esta lo suficientemente optimizado como para cargar de forma mas rápida. Sin embargo, es un recurso muy util para saber de que paquetes logramos prescindir si vuestro editor va demasiado lento.

Atom Package Manager: Gestor de paquetes de Atom

Como amante de las terminales de texto, como demostré en la guia Cómo optimizar la dispositivo de Windows, hay una característica estupenda de Atom: integra un gestor de paquetes parecido a apt-get llamado apm (Atom Package Manager).

apm: Atom Package Manager

Dicho gestor de paquetes es una característica estupenda, puesto que logramos efectuar multiples actividades sin tener siquiera el editor abierto, ahorrándonos muchos clics, como por ejemplo:

  • apm search [paquete]: Buscar paquetes directamente desde una dispositivo de texto.
  • apm install [paquete]: Instalar paquetes (se pueden demostrar varios, separados por espacio).
  • apm uninstall [paquete]: Desinstalar paquetes.
  • apm list: Mostrar los paquetes instalados en el editor.
  • apm view [paquete]: Ver información sobre un paquete.
  • apm upgrade: Actualizar los paquetes desactualizados de Atom.

Extra: Combo para programadores

¡Ah! Se me olvidaba. Si deseas motivarte cuando estás programando y ser mas productivo, aqui teneis activate-power-mode, un pack con el que sentirás la fuerza de batir todos los records como programador…

Activate Power Mode: ¡Combo para programadores!

Emezeta blog



El mejor vídeo del día Trucos de Android


Nota: La creación de esta noticia le pertenece al autor original que aparece en la firma de más arriba. No hemos eliminado en ningún momento los enlaces oficiales, ni tampoco intentamos perjudicar su posicionamiento en los motores de búsqueda.

El Administrador de QueEsGoogle.Com

Agrega tu comentario