viernes, 16 de septiembre de 2016

Configurar Atom para desarrollo con PHP & Laravel

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:
  1. Una de las principales es que es completamente gratis
  2. Se le pueden instalar temas para personalizar su apariencia
  3. Es multiplataforma; por lo que lo podrás usar en tu sistema operativo preferido
  4. 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 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-next

Atom 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, despué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



El resultado final en nuestro Atom será algo como esto:



Listo, ahora a disfrutar de Atom!.

5 comentarios:

  1. Excelente post, lo probaré en cuanto pueda!

    ResponderEliminar
  2. Excelente post, lo probaré en cuanto pueda!

    ResponderEliminar
  3. una pregunta como saco el \ o la @ en atom la verdad no puedo :D

    ResponderEliminar
  4. Si. Codelobster es un buen editor. y pues bien, para gustos los colores

    ResponderEliminar