De Sublime Text hacia PHPStorm/WebStorm: Guía de migración


Lo confieso, soy fiel usuario de Sublime Text, un editor de texto avanzado de excelente calidad. Sin embargo, hay algo que extraño de un IDE: La capacidad de ir a la declaración de funciones y clases.

Esta es una característica muy importante en el desarrollo web, donde en ocasiones tenemos que lidiar con muchos ficheros JavaScript y bibliotecas de terceros.

Sublime Text cuenta con un plugin de terceros llamado CodeIntel que promete esta característica, pero nunca lo pude hacer funcionar. Al parecer el plugin estuvo un tiempo inactivo, pero hace un mes se actualizó su página de GitHub anunciando la versión 2.2.0.

Aunque puede que esta versión cumpla con el objetivo del plugin, no intentaré utilizarlo, ¿por qué? Porque decidí probar a

PhpStorm y WebStorm

¿Cuál es la diferencia entre ambos?

WebStorm no tiene soporte para PHP, en cambio, se especializa en todo lo relacionado con el desarrollo frontend, incluyendo soporte nativo para frameworks como AngularJS, NodeJS, LESS, SASS, Stylus, Meteor, Grunt, CoffeeScript, etc.

Al principio creí que estos eran IDEs comunes como Netbeans, que solo me prometían por encima de Sublime, ir a la declaración de funciones y clases con Ctrl + Click. Sin embargo, me demostraron que son capaces de hacer más que eso, muuucho más.

2 Características que necesita Sublime Text

1 – Una terminal integrada

Hasta donde conozco, este editor viene con una consola de Python que permite interactuar con el propio editor, sin embargo, ésta no permite ejecutar comandos del propio sistema operativo.

Esto al principio no fue un problema, pero se me hizo muy necesario cuando comencé a utilizar Yeoman, Grunt y Bower, ya que tener una consola en otra ventana me molesta un poco.

Por supuesto, hay varios workarounds para resolver esto, como utilizar Guake o algún plugin de Sublime que emule una terminal. No obstante, ninguno de ellos permite que Sublime tenga una terminal del sistema operativo integrada en el propio editor.

2 – Salva salva y salva con Ctrl + S

En Sublime cuando estás editando dos ficheros, necesitas salvar cada uno por separado presionando Ctrl + S, o bien salvarlos todos desde el menú File/Save All.

Aunque a esta última opción se le puede agregar un atajo de teclado desde las preferencias del editor, como Ctrl + Shift + S, me gustaría más que este “detecte” los cambios que realizo en los ficheros y los salve automáticamente.

Una característica que necesitan los IDEs

¡Ser más Rápidos!

Sin dudas esta es la característica principal por la que me tardé tanto tiempo en migrar hacia PhpStorm y WebStorm. La velocidad de Sublime Text para realizar cualquier operación es inalcanzable por otros editores de texto como él, así que los IDEs no tienen chance.

¿Pues sabes qué? Ya no me preocupo por eso, resulta que la velocidad de estos IDEs es bastante rápida si tenemos en cuenta la cantidad de cosas que puedes hacer con ellos.

En primer lugar descubrí que por defecto traen esas dos características que mencioné anteriormente, más todo lo que puede hacer Sublime.

En segundo lugar descubrí que estos pueden hacer muchas cosas más (aparte de las comunes en todos los IDEs), como integrarse con Git, GitHub y Subversión, compilar preprocesadores como LESS, SaSS, Stylus y CoffeeScript en tiempo real, etc.

Si utilizas Grunt, el IDE detecta de forma automática que lo estás usando y te añade al proyecto una consola (aparte de la terminal) dedicada a mostrarte las tareas que tienes implementadas en el Gruntfile.js.

En el caso de PhpStorm, éste trae soporte para muchos frameworks PHP como Symfony y Laravel, a través de plugins.

Pero esto es algo que si no lo sabías, a estas alturas ya lo debes haber inferido, por lo que a continuación abordaré las principales características de Sublime que están también presentes en los productos JetBrains, pero implementadas de otras formas.

Múltiples Cursores

En Sublime cuando quieres crear múltiples cursores para escribir lo mismo en varios lugares a la vez, es suficiente con presionar la tecla Ctrl y dar click en tales lugares.

Esto no ocurre así en los IDEs, pues la correcta combinación es Alt + Click. Al realizar esto en una distro GNU/Linux, como Ubuntu, me di cuenta que ¡No Funciona!.

Esto sucede porque la combinación Alt + Click en las distros se utiliza para mover las ventanas. Solución: cambiar la combinación de teclas por otra como Alt + Shift + Click.

Para lograrlo ve a los ajustes del IDE: File/Settings/Keymap, y busca por la palabra caret. Te aparecerá el keymap Add or remove caret, el cual debes cambiar dando click derecho/ Add Mouse Shortcut sobre la opción. Acepta los cambios y prueba.

Sweet multiple carets under (Php/Web)Storm, neat!

Selección de múltiples ocurrencias

En Sublime, cuando deseas seleccionar una o varias ocurrencias de una palabra, presionas la combinación Ctrl + D, y así sucesivamente hasta la última (si quieres seleccionarlas todas).

En los IDEs la combinación correcta es Alt + J, pero trae una combinación adicional que permite seleccionar TODAS las ocurrencias de una vez: Alt + Ctrl + Shift + J.

Otro uso muy útil que encontré, es que puedes deseleccionar hacia atrás las ocurrencias que ya seleccionaste, con la combinación: Alt + Shift + J.

Creación de Snippets

En Sublime es muy útil crear snippets, pues te permiten ahorrar repetir el código común que utilizas en los proyectos. Si no conoces este concepto, un snippet te permite crear mucho código, con una sola palabra, por ejemplo, puedes crear un snippet para que cuando escribas la palabra lg y presiones Tab, aparezca el código:

console.log(' | ');

O para cuando escribas la palabra ent en un fichero PHP, se cree la estructura completa de una Entidad Symfony.

Este concepto en los IDEs se llama Live Templates y es un poco más completo que en Sublime.

Para crear un Live Template similar al snippet anterior, lo puedes lograr muy fácil con la opción Save as Live Template.

  1. Escribe console.log(''); en un fichero cualquiera y selecciónalo.
  2. Presiona la tecla Shift dos veces, te debe aparecer el búscador global del IDE.
  3. Escribe en el buscador: save as y se mostrará como primera opción Save as Live Template

enter image description here

En el menú que aparece le das un nombre a tu nuevo snippet (me gusta más llamarlo por este nombre), una descripción y el ámbito en que estará disponible, que permite definir si el snippet puede ser activado en ficheros HTML, CSS, JavaScript, C++, Bash etc, ya que no tiene mucho sentido que este snippet esté disponible desde un fichero .cpp por ejemplo.

Al aceptar los cambios podrás escribir el nombre del snippet (en este caso lg) y se autocompletará con console.log('').

Hay más opciones para configurar un snippet, como la posibilidad de definir hacia dónde se moverá el cursor al presionar TAB, las acciones que se deben realizar al presionarlo, etc.

Funciones de Completamiento Postfix

Esta es una característica impresionante y poco conocida, es muy parecida a los snippets, pero muuucho más inteligente que ellos.

Es más, ni siquiera puedes crear tú mismo nuevos Postfix completion, éstos vienen con el IDE por defecto y no se pueden modificar.

Uno de ellos es el propio console.log. La filosofía es que te debes concentrar en escribir el contenido y que el código que lo “envuelve” se genere solo.

Por ejemplo, abre un fichero JavaScript y escribe lo siguiente:

“Este es un texto mostrado por la consola”.log

e inmediatamente presiona la tecla TAB. Verás algo impresionante, lo anterior se expande a:

console.log(“Este es un texto mostrado por la consola”);

Hay varias funciones Postfix disponibles, he aquí otros ejemplos:

a == b && b > 2 || existe() && !funciona.if

al presionar TAB inmediatamente luego de escribir .if lo anterior se expande a:

if (a == b && b > 2 || existe() && !funciona){
  // code here
}

Iterar sobre un array:

var array = [1,2,3,4,5]; array.itin

Al presionar TAB luego de escribir .itin se expande lo anterior a:

var array = [1,2,3,4];
for (var obj in array) {
    // code here
}

Por último y no menos interesante, crear variables:

2 + 5 + 8 - 2 * 5.var

se expande a una variable igual a la expresión:

var number = 2 + 5 + 8 - 2 * 5;

Para ver todas las funciones Postfix, ve a los ajustes del IDE y escribe en el buscador la palabra Postfix. Te aconsejo experimentes con ellas y las uses, pues son superútiles.

enter image description here

EMMET

Emmet es un proyecto independiente que permite escribir código HTML y CSS de una manera muy cómoda.

Tanto Sublime Text como los IDEs pueden utilizarlo, los IDEs lo traen por defecto, pero en Sublime hay que instalar el plugin (recomiendo hacerlo desde el Package Control).

Emmet es tan poderoso que puedes crear la maquetación básica de una página web con una sola línea de código:

html:5 más la tecla TAB en un documento vacío se expande a:


<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

Para crear una etiqueta script con el atributo src:

script:src expande a: <script src="|"></script>

Para insertar un estilo CSS

link:css expande a: <link rel="stylesheet" href="style.css"/>

Para generar el Favicon de la página:

link:favicon expande a:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

Para generar input de formulario:

  • input:t expande a: <input type="text" name="|" id="|"/>
  • input:email a <input type="email" name="|" id="|"/>
    • input:url a <input type="url" name="|" id="|"/>
  • input:search a <input type="search" name="|" id="|"/>
  • input:password a <input type="email" name="|" id="|"/>

Y así con los demás.

Una característica que utilizo mucho en Emmet es cuando deseo crear una lista desordenada:

ul>li{Li numero $}*3 espande a:


<li>Li numero 1</li> <li>Li numero 2</li> <li>Li numero 3</li>

También puedes crear elementos hermanos con los selectores CSS que normalmente conoces:

(#padre>(.hijo1+.hijo2))+#tio

expande a:

<div id="padre">

    <div class="hijo1"></div>
    <div class="hijo2"></div>

</div>

<div id="tio"></div>

Observa cómo no hay que especificar que los elementos son div, con poner su ID o su Clase es suficiente.

Emmet en CSS

Emmet en CSS te ahorra mucho tiempo de código, veamos algunos ejemlos:

Para crear valores de ancho y alto, se puede seguir la siguiente convención:

[propiedad][número][unidad de medida]

Así, para decir que algo tiene 20 píxeles de ancho y 10 em de alto sería de esta forma:

w20 + TAB y h10em + TAB

Lo anterior expande a: width: 20px; height: 10em;

Lo mismo puedes hacer con los padding y los margins:

m2%103em-10 expande a: margin: 2% 10px 3em -10px;

Bastante bueno ¿no crees?

Para ser un ninja en Emmet te recomiendo leas la documentación oficial.

Inspector de bases de datos

Al principio creí que era solo un visor de las bases de datos que estaban en algún servidor, ¡pero Nooo! PhpStorm tiene prácticamente un completo Editor de Bases de Datos, y para el caso de Postgres, adivina qué: ¡Es múcho más rápido e intuitio que el PgAdmin!

Síi, directamente desde el IDE te puedes conectar a un servidor de BD, ver todas las que están disponibles, mostrar los datos de sus tablas, modificar tuplas de forma visual, REALIZAR CONSULTAS ¡y con qué rapidez!

Para rematar, este es el soporte que tiene PHPStorm en cuanto a bases de datos se refiere:

  1. Postgres
  2. MySQL
  3. Oracle
  4. SQlite
  5. DB2
  6. SQLServer
  7. SysBase
  8. H2
  9. Derby
  10. HSQLDB

Dude, ni sabía que existían esas últimas. Por supuesto, para poder comunicarse con el servidor, el IDE necesita el driver del tipo de sistema de bases de datos correspondiente.

fig bd

No me detendré a cómo realizar los pasos para conectarse a una BD pues no tiene complicaciones y es un tema un poco de más práctica que de teoría, solo debes ver, al conectarte, los menús nuevos que aparecen y ver qué hace cada uno (crear consulta, eliminar filas etc).

Conclusiones

Actualmente uso ambos, Sublime Text y los IDEs para el desarrollo. ¿para qué sigo utilizando Sublime? Para no matar moscas con un martillo.

Cuando deseo cambiar pocas cosas en algún CSS aislado, consultar un fichero JSON, cambiar algo pequeño en un fichero HTML, leer un TXT, uso Sublime.

Para el trabajo diario en el proyecto, donde interactúo con muchos ficheros, que están versionados, en ocasiones desorganizados, donde el proyecto está vinculado a bases de datos o algún framework en específico, utilizo PhpStorm/WebStorm.

Acá dejé de mencionar algunas funciones que también son útiles, como:

  • La capacidad de no permitir indexar algunas carpetas en el proyecto.
  • Refactorización
  • Crear scopes
  • Debug en servidores remotos

entre otras que me gustaría abordar en próximas entradas.

Dime, ¿conoces otras funciones de estos IDEs que te han ayudado en tu desarrollo profesional? ¿Cuáles?

  • Joseph Purificación

    Hola amigo, yo uso phpstorm version 10, sabes como instalar un tema en esta versión?

    • wii_ch0

      File>Settings>Plugins

      En la parte inferior seleccionas “Install JetBrains plugin…” luego tecleas “Material Theme UI”, lo instalas y ya.

  • kayserote

    Yo estaba en la misma historia que comentabas en el post. usaba sublime text3 , pero para que tuviera un desempeño ,medianamente decente había que instalarle un millon de parches (ellos lo llaman paquetes) cada vez que quería formatear el pc, tenia que volver a instalar los parches, y en ocaciones simplemente se caían y dejaban de funcionar.
    Entonces un día me canse y descargue phpstorm y la cosa cambio del cielo a la tierra. Actualmente utilizo phpstorm 10, lo único malo que tiene phpstorm es el elevadisimo consumo que tiene de recursos del sistema. así que si tienes un equipo con 2gb de ram, estarás muy pero muy justo.
    Por lo demás solo tengo buenas palabras para este IDE.
    y recién ahora que escribo este comentario me doy cuenta que no tengo instalado sublime text 3.

  • clod

    I like to use Codelobster PHP Edition: http://www.codelobster.com

  • wii_ch0

    Algún lector de este artículo conoce la manera de sincronizar los archivos -automáticamente- que se han copiado al momento de hacer una conexión en un servidor remoto!?

    Puesto que al momento de realizar cambios en los archivos -locales- los cambios no se ven reflejados -sincronizados- con los archivos alojados en el servidor remoto.

    Saludos.

    • wii_ch0

      Solo era de buscar un poco más 😀

      File->Settings…->Build,Execution,Deployment->Options

      Ahí nos da tres opciones de configuración en el apartado de: “Upload changed files automatically to the default server” las cuales pueden ser: Always, On explicit save action (Ctrl+S), Never. Cualquiera de las primeras dos si se tiene bien configurado el servidor remoto deberá funcionar.

      Saludos.

  • Quarter

    Excelente IDE PhpStorm y efectivamente es todo un Lamborghini comparado con otros iDE´s o herramientas de desarrollo, excelente Articulo hay cosas que no sabia de PhpStorm, saludos.

  • Santiago Molina

    brutal que post tan epico, muchas gracias :3 aprendi mucho de el.