Configurar PhpStorm

Última actualización: 19/04/2016

En el mundo del desarrollo, es muy útil el poder hacer uso de un IDE para poder escribir nuestro código, éste IDE nos permitirá gestionar lo relacionado a nuestro proyecto, dependiendo del mismo. Algunos IDEs pueden ser básicos dónde sólo podremos escribir el código, nos indique errores de sintaxis en la codificación, auto-complementación, FTP, Control de versiones. Otros estarán mucho mas completos, soporte para SSH, integración con base de datos y diversas mejoras; ejemplo de ésto último es PhpStorm.

Anteriormente ya se hizo una revisión de un IDE, Aptana Studio en:

http://blog.angelinux-slack.net/2011/05/30/instalar-y-configurar-aptana-studio-3-linux-2/

En esta ocasión se analizará la configuración de PhpStrom, el cuál se puede descargar desde:

http://www.jetbrains.com/phpstorm/download/

Para Arch y derivados, como Manjaro, con el siguiente comando se instala desde repositorios:

$ yaourt -S phpstorm

El ejemplo de la instalación será en Linux; para la versión Windows, se puede utilizar el método de “siguiente, siguiente, siguiente”.

Una vez descargado nuestro archivo, se procede a descomprimir. Debido a que es un ejecutable y no instalable, lo más conveniente es descomprimirlo en un lugar que deseemos que resida la aplicación, se puede dejar en descargas o en cualquier otra carpeta de home, pero si tenemos una carpeta para nuestras aplicaciones, sería mejor que quedara ahí, todo esto con motivo de organización.

Ya que tenemos PhpStorm fuera de su empaque de compresión, entramos a su respectiva carpeta y localizamos la subcarpeta bin, accesamos a ella y encontraremos el archivo phpstorm.sh, y procedemos a ejecutarlo.

Si es por consola, sólo tenemos que escribir

./phpstrom.sh

Si lo ejecutamos desde interfaz gráfica, puede que nos muestre un mensaje preguntado si queremos ejecutar el script.

Y elegimos “Ejecutar”.

Después nos mostrará una ventana donde nos pregunta si queremos importar la configuración de una versión anterior, la cual podemos cerrarla en caso de que no queramos.

Seguido, nos mostrará una pantalla para preguntarnos sobre la licencia, y podemos elegir la evaluación por 30 días.

Con lo cuál nos mostrará un mensaje que indica que para iniciar la evaluación, debemos aceptar la licencia, y nos muestra una liga para poder leerla.

Sabemos que no la leíste, nosotros tampoco. Por lo que podemos dar clic en Aceptar, y esperar no haber regalado nuestra alma.

Se empieza a ejecutar la aplicación (lo hace mucho, mucho, mucho más rápido al ejecutarse en Linux que en Windows, pero esa, es otra historia).

Ahora nos aparece una ventana con la configuración inicial. La cuál podemos dejar así, ya que más adelante podremos ir conociendo toda la personalización que tiene éste IDE. Si ya eres un usuario asiduo de PhpStorm, puedes configurarlo de una vez, aunque si sí lo eres, dudo que estés leyendo esta guía para saber como configurarlo; paradoja arreglada.

En resumen, esta ventana nos muestra, el tipo de mapa de teclado. El tema del IDE, colores y fuentes, Crear un acceso directo para ejecutar la aplicación. Podemos dejar todo intacto por el momento y dar clic en “Ok”. Al hacerlo, el sistema operativo puede solicitarnos nuestra clave root para poder escribir en el sistema.

Nos indica que los cambios fueron aplicados, y que si queremos reiniciar. Sí, sí queremos.

Acto seguido se reinicia el IDE, y nos muestra una pantalla donde podemos crear un nuevo proyecto, abrir un proyecto existente, crear un nuevo proyecto desde archivos existentes, o utilizar un control de versiones. Para efectos de esta guía utilizaremos la opción de Crear un nuevo proyecto desde archivos existentes.

En esta pantalla nos da las siguientes opciones:

Crear proyecto desde

Un servidor web instalado localmente, con archivos alojados en el document root del servidor.

Un servidor web instalado localmente, con archivos alojados desde otro punto local.

Un servidor web remoto, con archivos accesibles desde una red compartida o una unidad montada.

Un servidor web remoto, con archivos accesibles desde FTP/SFTP/FTPS.

Un directorio local donde no tenemos un servidor web configurado aún.

Dado que (supongo) la mayoría de nosotros tendremos ya proyectos en nuestro disco y que queremos empezar a utilizarlos desde PhpStrom, vamos a elegir la última opción para que tanto lectores con servidores como con no servidores, podamos empezar a trabajar.

Acto seguido, podemos ver una pantalla donde nos muestra el contenido de nuestro disco y debemos buscar la carpeta en donde contenemos el proyecto.

Debemos buscar la carpeta en donde se encuentra todo el proyecto y damos clic en el botón “Project Root” para indicar que es la raíz de nuestro proyecto. Esto hará que todas las subcarpetas se coloquen con fondo verde, indicando que son parte de nuestro proyecto. Además, podemos elegir alguna carpeta y utilizar el botón “Test Sources” para indicar que ahí se encuentran códigos fuentes de pruebas; El botón “Excluded” para indicar que se excluya la carpeta seleccionada, por ejemplo porque ahí tenemos documentación pero que no necesitamos que se suba por FTP, o que esté en nuestro repositorio de control de versiones; y finalmente el botón “Resource Root” para recursos del proyecto raíz.

¿Ya vas dando cuenta de las mejoras que tiene PhpStorm con respecto a otros IDS? ¿No? Bueno, aún estamos en el inicio.

Una vez que terminamos de indicar como quedará nuestro proyecto. Damos clic en el botón de finalizar. “Finish”.

Se abrirá la aplicación y automáticamente nos mostrará el contenido de varios archivos.

Del lado izquierdo tenemos el panel del proyecto.

En la parte central, tenemos el contenido del archivo que queremos editar.

En la parte de la derecha tenemos una barra donde nos mostrará información de diferentes secciones, que más adelante explicaremos.

En la parte inferior, tenemos un emulador de terminal.

Todo  esto lo podemos configurar y adecuar a nuestra comodidad.

Al abrir un archivo para trabajar en él, podemos dar cuenta que debajo del menú, nos muestra la ruta de las carpetas de ese archivo que tenemos abierto, y podemos dar clic en cualquier carpeta de la lista, y nos mostrará un menú con la lista de archivos y carpetas que contenga, de esta manera podemos abrir otros archivos sin necesidad de utilizar el árbol de la vista del proyecto.

Ahora vamos a ver cómo configurar los accesos por FTP / SSH.

Teniendo nuestro proyecto seleccionado, nos dirigimos al menú Tools -> Deployment -> Configuration y tendremos la siguiente pantalla.

Damos clic en el signo de +

Le colocamos un nombre a la conexión, la que queramos, y elegimos conectarnos por FTP.

En FTP host: colocamos la dirección IP o el nombre de dominio a donde queremos conectarnos.

En Port, lo dejamos por default (21) o si tu servidor tiene un puerto FTP personalizado, entonces se coloca el nuevo.

User name: Nombre de usuario del FTP

Password: Clave de nuestro usuario FTP

Save password: te permite indicar si quieres que la aplicación guarde tu contraseña, o te la pida cada vez que quieras transferir archivos.

En root path, es la dirección de la carpeta a dónde conectará. En servidores Linux es común que si tenemos un usuario, nos mande a la carpeta home/eseUsuario, pero para colocar nuestras páginas deben subirse a public_html/carpetaDelProyecto; y si nos crearon un usuario FTP, entonces ya nos habrán posicionado a la carpeta destino. Si tienes dudas en qué carpeta debes colocar tu página, cuéntaselo a quien más confianza le tengas,

A la derecha tenemos dos botones, Autodetect, intentará elegir la carpeta correcta dependiendo de los accesos de usuario que hayas colocado, pero es mejor no confiar del todo en ese botón; junto hay un botón con tres puntos. Si ya se colocaron los accesos correctos entonces podemos dar clic y nos desplegará la carpeta del servidor remoto donde podremos elegir la carpeta donde queremos que nuestro proyecto sea subido.

Advanced options: Éste botón es importante para mejorar nuestra experiencia con FTP, debemos habilitar la opción Passive mode, para que no haya desconexiones al transferir por FTP.

En la pestaña Mappings, en la sección Deployment path on server: También elegimos la ruta a donde queremos que se transfieran nuestros archivos, para ello usamos el botón que tiene los tres puntos y nos abrirá una ventana donde podremos elegir la carpeta del servidor remoto.

Damos clic en OK, y ya tenemos configurado nuestra conexión FTP. Así que podremos subir y descargar archivos. Hacemos click derecho en la carpeta o archivo que queramos cargar / descargar y en el menú Deployment elegimos Download (descargar) o Upload (subir) según sea nuestro caso.

Al transferir archivos, se mostrará en la parte inferior, en la sección File Transfer, el log de la transferencia por FTP, cantidad de archivos y velocidad.

Al tener ya configurado la conexión FTP, podemos usar el panel Remote Host que se encuentra en la parte derecha de la aplicación, en el cual podremos crear carpetas, archivos, eliminarlos; con esta utilidad, ya no necesitaremos un cliente de FTP externo.

Una herramienta muy útil, es la conexión por SSH. En muchas ocasiones debemos conectarnos por consola al servidor de nuestro proyecto. Mientras que en Windows necesitas una herramienta externa, y si por un anacronismo, estás usando XP, te darás cuenta que muchas de esas herramientas no funcionan en dicha versión. Los usuarios de Linux por lo regular ya pueden conectarse por SSH desde la consola. En éste caso, lo podremos hacer desde la misma aplicación de PHPStorm; para ellos nos dirigimos a Tools -> Start SSH Session y de la ventana que aparezca, seleccionamos Edit Credentials…

Host: Colocamos la IP o el dominio a donde queremos conectarnos.

Port: El puerto del servidor. Si no tiene uno personalizado entonces el default es 22

User name: Nombre de usuario. No necesariamente será el mismo que el FTP. Nuestro usuario debe tener permisos para conectarnos por SSH, o si somos administradores del servidor, entonces podemos conectarnos como root… con su respectivo cuidado en los comandos que escribamos.

Auth type: Podemos elegir si nos conectamos a través de la clave del usuario que escribimos anteriormente, o si tenemos más seguridad en el servidor, la dirección del archivo de nuestra clave privada.

Password: Si seleccionamos que nos conectaremos por clave entonces aquí la escribimos.

Private key file: Si seleccionamos que nos conectaremos por clave privada, entonces debemos indicar la ruta del archivo. Por default, nuestra clave privada puede estar en /home/nuestroUsuario/.ssh/id_rsa.

Passphrase: La clave de nuestra llave privada.

Si todo está correcto entonces en la parte inferior nos mostrará la conexión al servidor remoto.

Control de versiones.

PHPStorm funciona perfectamente con git, y si tenemos nuestro proyecto ya configurado con un repositorio, entonces podremos ya interactuar con él. Podemos usar la pestaña del panel de la derecha Version Control; y nos mostrará todos los archivos que tienen cambios y que les falta realizar su respectivo commit.

Sí, le hice un cambio al tema para que se notaran bien las letras de los archivos que han sido modificados.

Para hacer el commit, damos clic derecho al archivo que queremos, o bien, si queremos hacer commit de todo, damos clic derecho a la palabra default, y después Commit Changes.

De todas maneras en esta ventana podremos seleccionar o quitar selección a los archivos o carpetas que no queramos que estén en el commit.

En la parte inferior, en Commit Message, podemos indicar el por qué de nuestro commit.

En la parte derecha, en la sección de Git, en la parte de Author, podemos escribir o seleccionar de la lista qué autor está creando el commit.

En Before Commit, podremos indicar si queremos que antes de hacer el commit, se reformatea el código, se optimizan los imports, se revisa si hay cosas pendientes por hacer (TODO) análisis de código, limpieza, actualización de copyright. Algunas opciones hacen que el commit tarde mucho, dependiendo del número de archivos a realizar commit, por lo que es recomendable irlas seleccionando en el caso de querer dichas acciones, una por una en cada commit y ver si no se ejecuta lentamente la acción.

En After Commit, podemos indicar si queremos que se suba por FTP automáticamente después de ejecutar el commit; no es recomendable si solemos hacer commits pero que aún no está todo listo para producción.

Además, en la parte superior, tenemos una serie de botones en el cual, el primero de ellos, es show diff y funciona de la siguiente manera. Seleccionamos un archivo de nuestra lista y damos clic en ese botón y se abrirá una pantalla donde nos mostrarán los cambios entre la nueva versión y la versión anterior.

Si ya estamos listos para realiazar nuestro commit, entonces en la pantalla donde nos lista los archivos que tienen los cambios, pasamos el cursor en el botón Commit, y nos desplegará un menú.

Commit: Realiza el commit (De verdad.. sí, en serio)

Commit and Push: Realiza el commit e inmediatamente lo sube al repositorio.

Una vez que realizamos el commit nos mostrará una notificación indicando el número de archivos cambiados y el comentario del commit.

Si queremos descargar los cambios del repositorio (Pull), damos clic derecho nuestro proyecto -> Git -> Repository -> Pull.

Y damos clic en el botón Pull. Nos pedirá la clave del repositorio, teniendo la posibilidad de guardarla.

De igual manera podemos subir nuestros cambios: Clic derecho al proyecto -> Git -> Repository -> Push.

Y para enviarlo se da clic en el botón de Push.

¿Muchos pasos para hacer commit? PHPStorm pensó en ti y tiene unos botones debajo del menú para que te sea más rápido.

El que tiene la fecha hacia arriba es para commit. Para push está el atajo de teclado Control + Shift + K.

Trabajar con varias ramas.

Cuando trabajas en un desarrollo colaborativo, lo mejor es tener ramas para tener un menor control del proyecto.. PhpStorm nos muestra la rama en la que actualmente estamos.

Como vemos, nos encontramos en la rama Angelinux. Al dar clic sobre esa rama, nos mostrará la lista de las ramas locales y las ramas remotas.

Para pasarte a alguna otra rama puedes seleccionar la rama y elegir checkout o directamente desde tu consola

[git]

git checkout tuRama

[/git]

¿Quieres descargar los cambios de otra rama pero tienes modificaciones en la tuya que no quieras hacerles commit porque no están terminados o fueron modificaciones solo para desarrollo de tu entorno? La solución es Stash. Para ello en tu lista de Local Changes, tendrás los archivos que han sido modificados en tu proyecto, a los cuales puedes dar clic derecho -> git -> repository -> stash changes

De esa manera podrás descargar los cambios de otra rama sin tener que hacer commit a los archivos que no lo requieren.

Comparar tus cambios actuales con los anteriores que están en el repositorio: ¿Te equivocaste? A todos nos pasa, y tal vez no tienes respaldo del proyecto, o sobre-escribiste por FTP el archivo correcto con cambios que no deberían ser. Para eso está el control de versiones Git o el historial loca. ¿La diferencia? El historial local sólo te mostrará ls cambios que hayas registrado en phpStorm, mientras que el historial de git puedes contrastar con los cambios que cualquier persona haya realizado y subido al repositorio.

Clic derecho al archivo -> Local history -> Show history y nos abrirá una ventana para poder observar los cambios que hayamos realizado a nuestro archivo con los de la fecha seleccionada del lado izquierdo.

Para hacer lo mismo con git: Clic derecho -> Git -> Compare with y nos muestra la lista de cambios del repositorio y elegimos contra cual lo queremos comparar.

Y una vez elegida la fecha, podemos ver los cambios.

En las secciones diferentes, podemos dar clic derecho y seleccionar replace o insert para tomar dichos cambios.

Además, podemos ver el historial en el panel derecho, de los archivos que estemos editando. Clic derecho al archivo -> Git -> Show history

En ese mismo panel, que es la pestaña Version Control, tenemos diversas vistas, las cuales a veces no podemos ver completas, pero dando clic en una fecha, se desplegarán.

Es la fechad e la derecha, puede estar una o ambas flechas. Al dar clic muestra el menú de las vistas disponibles.

Local changes: Son los cambios actuales en tu proyecto que no has hecho su respectivo commit.

Log: Es el árbol de cambios de tu repositorio, muestra quien, cuándo y qué archivos han sido modificados y subidos al repositorio.

Console: Muestra la salida de consola de tus acciones (pull, push, commits, etc)

¿Es todo? Noooo.

En el panel de la derecha, también tiene una pestaña llamada Datasbase, y nos permite configurar nuestra base de datos para accesar a ella.

Damos clic en el + y en data source tendremos la posibilidad de seleccionar entre otros, MySQL, Oracle, PostgreSQL… aamm. también SQL Server.

En éste ejemplo se conectará a MySQL.

Nota: Si te aparece el mensaje como en la parte inferior de la pantalla, que se debe descargar el conector, entonces das clic en Download, y se descargará dicho conector automáticamente.

Name: El nombre que tendrá nuestra conexión a la base de datos.

Host: La IP o nombre de dominio en donde se encuentra la base de datos.

Port: El puerto de la base de datos.

Database: Nombre de la base de datos. (puedes dejarlo en blanco y después elegir la base de datos de una lista)

User: Nombre de usuario

Password: Clave.

En la pestaña Schemas, puedes seleccionar qué base de datos podrás ver en la lista para poder conectarte. Elije las que vayas a necesitar usar para tu proyecto.

Da clic en Test Connection, en la pestaña General, para verificar que todo esté bien, y si es así, entonces ya se puede agregar dando clic en OK.

Este gestor de base de datos no nos funcionará como un cliente habitual donde podamos tener todas las opciones de interfaz gráfica, más bien será una herramienta de consulta, ya que a veces para ver si determinado campo tiene cierto valor, debemos abrir el cliente que usamos, conectar, entrar a la base de datos, tabla, consultar y ver el valor. Con PHPStorm, no tendremos que salir de nuestro IDE para hacer eso.

Si queremos ver los registros de una tabla o modificarlos, entonces hacemos doble clic en la tabla que queramos, cada consulta se abrirá en una pestaña diferente.

Si en nuestra lista de base de datos damos clic derecho, entre varias opciones tendremos la de Diagrams, y podremos elegir Show visualisation.

Desde aquí tenemos el botón de imprimir, en la parte superior del área del gráfico, debajo de donde están las pestañas de los archivos abiertos, es el penúltimo; y el último botón es para ver la vista previa, en la cual podemos indicar que se imprima en varias páginas y podremos ver como queda previamente.

Configuraciones

Indicador de memoria: En el menú File -> Settings, en el sub menu Appearance, tenemos una opción llamada Show memory indicator; su función es indicar el nivel de memoria que está usando el IDE y esta se mostrará en la parte inferior derecha.

Panel inferior a lo ancho del panel central: El panel inferior nos sirve para tener información visible y útil en elmomento que necesitemos, aunque en pantallas grandes puede haber mucho desperdicio de espacio, ya que la información mostrada puede no ocupar todo el área reservado. Por ejemplo

Como podemos observar, el log de File transfer ocupa el espacio de los tres páneles centrales. Para cambiar eso podemos ir a File -> Settings -> Appearance & Behavior -> Widescreen tool window layout y lo activamos.

Ahora solo ocupa el espacio del panel central, y desperdiciamos menos espacio para los demás páneles.

Por el momento hasta aquí terminamos éste tutorial. Más adelante seguiremos colocando pequeños detalles o configuraciones que harán de nuestra experiencia con PHPStorm mucho mejor.