Configuración de ATOM

Una vez que hemos elegido nuestro editor llega el momento de instalarlo y configurarlo. Como expliqué en el artículo anterior,  yo me he decidido a utilizar Atom por varios motivos: está muy bien valorado entre la comunidad de desarrolladores, es muy ligero y completo para la programación en PHP y, sobre todo, es un editor nuevo que deseo conocer. 

Mientras vaya desarrollando los artículos evolucionaré en el manejo de este editor de texto/IDE a la misma vez que ustedes (si ustedes quieren, por supuesto). Así que les ruego que si ven que incurro en algún error o que algo que esté explicando cómo se hace se puede hacer de una forma más sencilla escriban un comentario indicándolo para corregir la entrada.

Me queda por decir que me iré guiando por lo explicado por los propios desarrolladores de Atom y que publicaron en lo que ellos han llamado Atom Flight Manual, en español, Manual de vuelo de Atom.

Sin más que decir vamos a ir entrando en el meollo.

Requisitos de instalación

Para Ubuntu y resto de distribuciones de GNU/Linux, Atom sólo está disponible para sistemas de 64-bit. Aparte de este no hay otro requisito para la instalación de este editor de texto.

Instalación del editor

Para la instalación de Atom en Ubuntu 20.04 podemos utilizar dos métodos. El primero, y que yo he utilizado, es la instalación desde el propio repositorio de Atom. El segundo es utilizando un paquete .deb e instalarlo desde la línea de comandos.

Instalación desde el repositorio

Para instalar Atom en Ubuntu, también en Debian y otras distribuciones de Linux, seguiremos estas instrucciones:

• Añadir el repositorio oficial de Atom a nuestro sistema:

# Añadir la clave a APT

$ wget -qO - https://packagecloud.io/AtomEditor/atom/gpgkey | sudo apt-key add

# Creamos el fichero de configuración del repositorio oficial de Atom

$ sudo sh -c 'echo "deb [arch=amd64] https://packagecloud.io/AtomEditor/atom/any/ any main" > /etc/apt/sources.list.d/atom.list' 

# Actualizamos la caché de APT

$ sudo apt-get update

• Instalar Atom con el gestor de paquetes Apt:

# Instalar Atom

$ sudo apt install atom

# Instalar la versión Atom Beta (versión inestable)

$ sudo apt install atom-beta

Instalación usando un paquete Debian

Seguiremos estos pasos si queremos instalar el Atom utilizando el paquete para Debian: 

• En una terminal, nos moveremos a un directorio temporal y descargaremos allí el paquete .deb de Atom.
• Ejecutaremos estos comandos:

# Instalar Atom

$ sudo dpkg -i atom-amd64.deb

# Instalar las dependencias de Atom si éstas no se encuentran

$ sudo apt -f install

Configuración como un IDE para PHP

Llegados a este punto, el Atom no es más que un editor de texto. Ahora llega el momento de configurarlo para que actúe como un IDE para PHP.

Cuando se ejecuta por primera vez se muestra la pantalla de bienvenida en la que se nos muestran una serie de opciones que pueden ser un buen punto de partida para empezar a utilizar Atom.

Sin embargo, nosotros vamos a configurar el editor siguiendo otros pasos. En primer lugar hay que aclarar que en Atom hay infinidad de comandos y que para ejecutarlos muchos de ellos tienen asociados atajos de teclado. Una vez aprendidos los que más utilicemos se ganará mucho en agilidad a la hora de trabajar con este programa.

Uno de los principales, y del que conviene recordar su atajo de teclado, es el que nos abre la paleta de comandos, en inglés Command Palette:

Ctrl+Mayús+P

También podemos acceder usando en el menú la secuencia View/Toggle Command Palette. Si nos fijamos al hacer esto, vemos que muchas de las opciones del menú tienen a su derecha la secuencia del atajo del teclado.

El Command Palette es un menú de búsqueda en el que podemos hacer la mayoría de las tareas que son posibles en Atom. La idea es que en vez de estar navegando por todos los menús buscando una opción, simplemente se busque el comando en el cuadro de búsqueda. Mientras se busca se puede ver también su atajo de teclado, de modo, que iremos aprendiendo los atajos que más utilicemos para agilizar nuestro uso del editor.

Configuración y preferencias

Comenzamos la configuración buscando en el Command Palette por la palabra Settings, o bien en el menú Packages/Settings View/Open, o bien usando su atajo de teclado Ctrl+,. 

Vemos en la parte izquierda de la pantalla una serie de secciones que podemos configurar. Si eres curioso, o curiosa, podrás navegar por ellas y leer las descripciones de lo que permiten. La mayoría basta con dejarlas como están por defecto. Nos centraremos en las que yo he considerado más significativas.

En la sección Core

Buscamos la opción File Encoding, en ella se define la codificación de caracteres que va a tener nuestro editor. Por defecto se encuentra seleccionada la codificación UTF-8, como es la más estándar la dejaremos. Sin embargo, si trabajas con otra codificación como ISO-8859-1, la puedes especificar aquí.

Si has organizado todos tus proyectos en una carpeta de tu home puedes especificar que sea la carpeta por defecto poniendo la ruta en la opción Project Home. 

En la sección Editor

Nos desplazamos por las opciones de configuración hasta encontrar la etiquetada como Tab Length y cambiamos su valor a 4 en vez de 2 que viene por defecto como indica el PSR-12 standard.

Otra opción que me deberíamos marcar es la de Soft wrap, con ella marcada la líneas se partirán automáticamente cuando alcancen el ancho de la ventana. Si, además, se marca Soft Wrap at preferred line length el partido de la línea tendrá efecto cuando se alcance el número de caracteres especificado en la opción Preferred Line.

En la sección Packages

En esta sección es donde se gestionan los paquetes instalados. Recién instalado el Atom como lo tenemos vemos que sólo  tiene los paquetes del Core (núcleo). Como hemos dicho, esto no es suficiente para convertir el editor de texto en un IDE PHP, por eso, en este momento de la instalación sólo echaremos un vistazo a los paquetes instalados. Si queremos y tenemos curiosidad, claro.

En la sección Themes

En Atom existen dos clases de temas que se pueden configurar. Aunque se pueden instalar paquetes de nuevos temas e, incluso, configurar tu propio estilo editando la hoja de estilo que se guardará en ./atom/styles.less.

• UI Theme: es el tema de la interfaz de usuario, el que da estilo a las barras de estado, vista de árbol,  pestañas de tabulación, listas desplegables... Por defecto, Atom proporciona 4 temas: dos oscuros (Atom Dark, One Dark) y dos claros (Atom Light, One Light). La selección inicial es One Dark que, de momento es el que voy a dejar seleccionado.
• Syntax Theme: este es el tema que aplicará los estilos en el interior del editor. También dejaré el tema por defecto, que es el One Dark. Puedes elegir entre los que hay instalados que son, en este caso, 8 temas.

En la sección Install

En esta sección es donde haremos la magia. Instalaremos paquetes para que nuestro simple editor se nos convierta en un flamante IDE para PHP. Aquí cada uno puede elegir los paquetes que desee, teniendo en cuenta que cada paquete instalado añade una carga de trabajo al Atom volviéndolo más lento al cargar. 

Para instalar los paquetes sólo tienes que realizar una búsqueda en el cuadro sobre lo que quieras instalar, en nuestro caso haremos la primera búsqueda por la palabra clave php. 

Personalmente yo he instalado los siguientes paquetes:

• ide-php: provee el soporte para PHP.
• linter-php: revisa la sintaxis PHP sobre la marcha. Al instalar este paquete se instalan dos más linter y linter-ui-default. Cuando abres el Atom te saldrá un mensaje de conflicto entre linter y  atom-ide-diagnostics. Para solucionarlo hay que ir a la configuración del paquete atom-ide-ui y en la sección Enabled Features buscar la opción Enable Diagnostics. En el desplegable seleccionar Never enabled. 
• php-debug: permite la depuración de código PHP usando XDebug. La configuración de este paquete requiere acciones extras externas al editor. Es por eso que en este momento no voy a proceder a configurarlo. Si tienes prisa por empezar a usar el depurador, o eres curioso, las instrucciones concretas las puedes conseguir en esta página.
• php-cs-fixer: ejecuta un revisador del código PHP para comprobar que se cumplen los estándares de codificación de PHP. Para funcionar bien requiere que esté instalado PHP Coding Standards Fixer. Para instalar este requerimiento ejecutamos en una terminal la siguiente orden estando en el home del usuario: composer.phar global require friendsofphp/php-cs-fixer. Una vez instalado hay que comprobar que en la configuración del paquete se apunte al ejecutable correcto. Concretamente hay que revisar estos valores:
• PHP executable path: en mi caso estaba en /usr/bin/php.
• PHP-CS-fixer executable path: tuve que poner este valor: /home/usuario/.config/composer/vendor/bin/php-cs-fixer.
Para ejecutarlo a demanda hay que utilizar, con el script PHP seleccionado, el atajo de teclado Ctrl-Cmd-S o buscar en la paleta de comandos Php Cs Fixer: Fix.
• atom-beautify: da formato a los ficheros HTML, CSS, JavaScript, PHP, Python, Ruby y muchos más. En la configuración de este paquete tuve que especificar unas pocas opciones nada más.
• En la sección Executables buscar la parte de PHP y poner la ruta del ejecutable de PHP (/usr/bin/php).
• En la misma sección buscar PHP-CS-Fixer e indicar la ruta absoluta donde se encuentra (/home/usuario/.config/composer/vendor/bin/php-cs-fixer).
• Lo siguiente es buscar la sección PHP y marcar la casilla Beautify On Save para que se ejecute el PHP-CS-Fixer cada vez que se salva un fichero.
• Marcar Beautify On Save en las secciones CSS, HTML y Javascript
• laravel: proporciona snippets para Laravel.
• atom-ide-javascript: añade soporte para Javascript en forma de snippets.
• ide-css: soporte para CS, LESS y SCSS.
• docblockr: una ayuda para escribir documentación. Si se trabaja en un grupo el código debe estar bien comentado para que sirva de ayuda a los otros compañeros y a uno mismo.
• autoclose-html: realiza el cierre automático de las etiquetas HTML.

Conclusión

Siguiendo estos pasos ya tenemos el Atom configurado como un IDE para PHP que te provee de estas características:

• Resaltado de sintaxis.
• Detección de errores sintácticos sobre la marcha.
• Refactorización de código automático al guardar un fichero.
• Soporte para PHP, Javascript, HTML y CSS.
• Adicción de snippets para la ayuda en la programación.
• Soporte nativo para el control de versiones con Git y GitHub.
• Depuración de código (en este momento pendiente de configurar).

Seguramente a estas alturas ya de habrás visto las posibilidades que tiene este editor. Es el momento de empezar a probarlo y ver si entre todos los paquetes disponibles hay alguno más que queramos utilizar para mejorar las funcionalidades.