El mundo de los editores de texto para desarrollo web con PHP es muy grande, existe una gran cantidad de programas dentro de los cuales están los IDE (Integrated Development Environment) y los editores de texto simples como Atom.
En esta ocasión quiero escribir acerca de Atom por varias razones:
- Una de las principales es que es completamente gratis
- Se le pueden instalar temas para personalizar su apariencia
- Es multiplataforma; por lo que lo podrás usar en tu sistema operativo preferido
- Tiene un administrador de paquetes que puedes usar con interfaz gráfica y a travez de la terminal.
Instalar Atom
Puedes [descargar Atom desde su página web](https://atom.io/) y una vez lo tengas en tu computadora puedes proceder a instalarlo(confío que si eres programador o estudias para serlo, no tendrás difucultades para instalarlo).
Instalación de paquetes o plugins
Para instalar los paquetes vamos a usar el comando **apm** desde una terminal (en Windows puede que necesites agregar el binario a las variables de entorno)
apm install autocomplete-plus atom-autocomplete-php data-atom file-icons genesis-ui git-control git-status git-time-machine language-blade language-dots language-nginx language-powershell language-vue language-vue-component laravel markdown-preview-opener minimap php-debug sort-lines vue-autocomplete color-picker docblockr emmet hyperclick php-hyperclick pigments linter linter-php oceanic-nextAtom Auto Complete PHP
Con este paquete tendremos auto completado para las funciones y cosas base de PHP
Data-Atom
Data-Atom nos permite conectarnos a nuestros gestores de base de datos(PostgreSQL, MySQL) y realizar las consultas que deseemos y ver los resultados, todo dentro de la interfaz de Atom
Language-blade
Soporte para las plantillas de blade
Laravel
Snippets y helpers de Laravel, pudes ver la lista completa de en el repo en gihub
Docblockr
Si te gusta escribir tu código bien documentado, entonces este paquete es para ti, puedes ver su forma completa de uso en su repo en github o en la web de Atom
Emmet
Este plugin prácticamente no requiere presentación, es de mucha utilidad a la hora de escribir código HTML y CSS puedes ver una lista considerable de atajos aquí
php-hyperclick
Con este paquete podremos darle ctrl + click al nombre de una clase y nos lleva a su definición, pero mejor míralo en acción
linter-php
Con estos paquetes tendremos lo necesario para poder desarrollar con PHP, algunos de los plugins requieren cierta configuración, por ejemplo el plugin **linter-php** funcionará normalmente si se tiene acceso al binario de PHP desde la terminal, de lo contrario tendrás que especificar donde se encuentra el ejecutable de PHP en las opciones de configuración del paquete, en mi caso yo puedo acceder a PHP desde cualquier ruta en la terminal.
Puedes revisar las opciones de configuración la web del paquete
Existen muchos mas paquetes que puedes instalar en Atom puedes explorarlos en su página oficial, algunos de los paquetes instalados son meramente cosméticos o complementarios, por ejemplo para los colores en css, o para trabajar con git y no precisamente con PHP o Laravel.
Personalizando estilos
Descargar e instalar FiraCode y FlottFlott, d
espués de descargar e instalar las dos fuentes pega el siguiente código en tu archivo de styles.less en Atom.
Con Atom abierto presiona la combinación CTRL+SHIFT+P y escriba 'styles', se abrirá un archivo; copiar y pegar el siguiente código al final del script
atom-text-editor {
font-family: 'Fira Code';
font-style: normal;
text-rendering: optimizeLegibility;
}
atom-text-editor::shadow {
.string.quoted,
.string.regexp {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
.source.js.jsx > .keyword.control.flow.js,
.storage, .type .function {
vertical-align: baseline;
font-family: 'flottflott';
height: inherit;
font-size: 1.5em;
line-height: 1rem;
}
.source.js.jsx,
.storage.type.function.arrow.js,
.variable {
font-family: 'Fira Code';
font-style: normal;
}
.string.unquoted.js {
color: #CDD3DE;
}
.entity.name {
font-weight: bold;
}
}Después de la instalación en las opciones de configuración seleccione el tema Oceanic Next
