{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/configurar-atom-para-desarrollo-php-laravel/","result":{"data":{"markdownRemark":{"id":"97774498-d678-5a27-8ddd-0ad6b2ef3bec","html":"
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.\n\n\n

\n\n\n
\n\n
En esta ocasión quiero escribir acerca de Atom por varias razones:\n
    \n
  1. Una de las principales es que es completamente gratis
    2. \n
  2. Se le pueden instalar temas para personalizar su apariencia
    3. \n
  3. Es multiplataforma; por lo que lo podrás usar en tu sistema operativo preferido
    4. \n
  4. Tiene un administrador de paquetes que puedes usar con interfaz gráfica y a travez de la terminal.
    5. \n
\n

Instalar Atom

\n
\n
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).\n

Instalación de paquetes o plugins

\n
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)\n
\n\n
\n
\n
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
\n

Atom Auto Complete PHP

\n
\n
Con este paquete tendremos auto completado para las funciones y cosas base de PHP\n\n\n

\n
\n\n

Data-Atom

\n
\n
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\n\n\n

\n
\n\n

Language-blade

\n
Soporte para las plantillas de blade\n
\n\n

Laravel

\n
\n

Snippets y helpers de Laravel, pudes ver la lista completa de en el repo en gihub

\n

Docblockr

\n
\n

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

\n

\n
\n\n

Emmet

\n
\n
\n

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í

\n
\n\n

php-hyperclick

\n
\n
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\n\n\n

\n
\n\n

linter-php

\n
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.\n\n\n

Puedes revisar las opciones de configuración la web del paquete

\n

\n\n

\n

\n\n\n
\n\n

\n
\n

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.

\n\n

\n

\n

Personalizando estilos

\n

\n
\n

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. 

\n

\n
\n
\n\n
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\n\n\n

\n\n\n
\n
atom-text-editor {\n\n    font-family: 'Fira Code';\n    font-style: normal;\n    text-rendering: optimizeLegibility;\n    }\n    atom-text-editor::shadow {\n    .string.quoted,\n    .string.regexp {\n        -webkit-font-feature-settings: \"liga\" off, \"calt\" off;\n    }\n    .source.js.jsx > .keyword.control.flow.js,\n    .storage, .type .function {\n        vertical-align: baseline;\n        font-family: 'flottflott';\n        height: inherit;\n        font-size: 1.5em;\n        line-height: 1rem;\n    }\n    .source.js.jsx,\n    .storage.type.function.arrow.js,\n    .variable {\n        font-family: 'Fira Code';\n        font-style: normal;\n    }\n    .string.unquoted.js {\n        color: #CDD3DE;\n    }\n    .entity.name {\n        font-weight: bold;\n    }\n}
\n\n\n
Después de la instalación en las opciones de configuración seleccione el tema Oceanic Next\n

\n

\n

\n\nEl resultado final en nuestro Atom será algo como esto:\n\n\n

\n\nListo, ahora a disfrutar de Atom!.","fields":{"slug":"/posts/configurar-atom-para-desarrollo-php-laravel/","tagSlugs":["/tag/laravel/","/tag/react/","/tag/atom/"]},"frontmatter":{"date":"2016-09-16T22:12:03.284Z","description":"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.","tags":["Laravel","React","Atom"],"title":"Configurar Atom para desarrollo con PHP & Laravel","socialImage":"/media/image-2.jpg"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/configurar-atom-para-desarrollo-php-laravel/"}}}