lunes, 24 de julio de 2017

Mi nueva configuración de Atom para desarrollo con Laravel & Vue..js

En una de mis entradas anteriores publiqué la configuración de Atom para el desarrollo con PHP & Laravel, sin embargo recientemente he encontrado otros paquetes o plugins para Atom que me han gustado mucho y acerca de los cuales les hablaré en este post.

La mayoría de paquetes para optimizar el desarrollo con PHP en Atom se encuentran aquí en esta página de github: https://github.com/php-integrator/  en donde puedes ver su documentación oficial.

Por lo pronto para ir al grano y hacer corta la escritura de este post, dejo las indicaciones de instalación tal y cual lo tengo en este momento:

1. Descarga el archivo con la lista de paquetes a instalar desde github: https://gist.github.com/darwinsalinas/3f44bff07a2f83f7e4523b2fc3e79f61

2. Ejecuta el siguiente comando en la terminal (para esto debes tener instalado los comandos del shell que vienen con Atom)

apm install --packages-file package-list.txt 
 3. Descarga el archivo de configuración de Atom desde esta url: https://gist.github.com/darwinsalinas/99d2b2eaa1d58358758f69e3c498e599

Para que la configuración proporcionada funcione correctamente debes de remplazar algunas de las entradas de la configuración:

"php-cs-fixer":
    executablePath: "/Users/darwin/.composer/vendor/bin/php-cs-fixer"
En esta parte debes reemplazar con la ruta de tu instalacion de php-cs-fixer, si no lo tienes instalado lo puedes instalar globalmente con composer con este comando

composer global require friendsofphp/php-cs-fixer
También debes reemplazar la siguiente entrada en la configuración:

"php-integrator-base":
    core:
      phpCommand: "/Applications/MAMP/bin/php/php7.1.2/bin/php"
En mi caso yo estoy usando el PHP de MAMP, si tu quieres saber la ruta de tu PHP puedes ejecutar en terminal

which php
Y por último debes reemplazar la ruta de tu node, en mi caso está en el /usr/local, puedes ejecutar en terminal npm get prefix para obtener la ruta de tu instalación de node

"linter-eslint":
    disableWhenNoEslintConfig: false
    fixOnSave: true
    globalNodePath: "/usr/local"
 
Una vez que tengas descargado el archivo ábrelo con tu editor de texto preferido (Atom), copia su contenido y reemplaza el contenido del archivo de configuración de Atom, En Mac click en el menú Atom--> Config

4. Para Lintear los archivos de Vue debes crear un archivo de configuración en la raíz de tu proyecto con e nombre .eslintrc.json y con el contenido de este archivo https://gist.github.com/darwinsalinas/f02acf9f2e0824bf5db34d53adf0aa08

Con esto ya tendríamos listo el editor para hacer algo como esto:


Como puedes apreciar Atom me sugiere código y me "lintea" los errores en los archivos de Vue, Blade y clases de PHP.

Listo eso es todo, a disfrutar de Atom!

Si te gustó, comparte; si le hace falta algún plugin o configuración al editor por favor comenta.!

0 comentarios:

Publicar un comentario