Una pregunta muy habitual cuando empezamos a trabajar con una tecnología – y pregunta de la semana de uno de mis lectores- es…¿qué IDE utilizo para Angular 2?¿que plugins me recomiendas? Hoy te recomiendo Visual Studio Code, pero…¿quieres saber por qué?

El abanico de opciones para trabajar con Angular 2 es grande:

• Desde editores ligeros como Sublime, Atom o Brackets, que disponen de variedad de plugins para usar ES6 o TypeScript, snippets, etc.

• A IDES más potentes como puedan ser WebStorm de JetBrains (la pega es que es de pago)

• Pasando por el sorprendente Visual Studio Code de Microsoft (VSCode para los amigos) y digo sorprendente por que no es muy habitual que los de Redmond proporcionen una herramienta gratuita, open source y multiplataforma…

Eligiendo VSCode

Hoy me voy a centrar en este último, principalmente por que además de ser una herramienta muy potente, está muy preparado para TypeScript (tiene sentido: Microsoft es quien está detrás de TypeScript).

Instalando VSCode

Nos vamos a la web de Visual Studio Code y además de información con todas sus bondades, tenemos el enlace para bajarnos el paquete en función de nuestro S.O.
El instalable se descarga, doble click, y listo. El proceso es de lo más simple.

Killer features

Voy a desgranar algunas de las características más potentes que tiene VSCode, que lo convierten en una alternativa a tener en cuenta.

IntelliSense

Aquí Microsoft ha aprovechado su expertise en marketing poniéndole un nombre interesante a una característica que queremos en todos los IDES: Autocompletar, contexto, información de la variable/método/clase que hemos seleccionado.

Su sistema IntelliSense es muy potente y detecta las librerías importadas, nos muestra la definición de los métodos al ponernos encima con el cursor, nos oferece autocompletado al escribir… la verdad, funciona muy bien.

Gestor de Git

Aunque reconozco que yo soy más de usar Git por consola de comandos, entiendo que tener integrado en el propio IDE un gestor de Git que te muestra los cambios de código e incluso desde donde puedes hacer commit, pull y push es un plus para muchos developers.

Cursores múltiples

Una de las cosas que más me gustaron de Sublime desde el principio, era la facilidad para realizar selecciones en vertical o multiplicar el cursor y poder editar en varios sitios a la vez.
VSCode ofrece cantidad de estas opciones, solo necesitas saber la combinación adecuada de teclas. Las principales:

• Ctrl + Shift + L: Si estás encima de una palabra o seleccionas una frase y tocas esta combinación de teclas, seleccionarás todas las instancias de esa palabra/frase que hayan en tu documento (poniendo multiples cursores, uno al principio de cada una de ellas).

• Shift + Alt + Up/Down: Si seleccionas Shift + Alt y te mueves hacia arriba o abajo con las flechas del teclado, multiplicarás el cursor en vertical.

• Shift + Alt + Drag: Si seleccionas Shift + Alt y arrastras con el ratón, crearás una selección vertical.

• Ctrl + D: Selecciona la palabra sobre la que tienes el cursor. Una vez seleccionada:

  • Ctrl + D: Selecciona también la siguiente palabra idéntica
  • Ctrl + K: Deselecciona la actual y selecciona la siguiente palabra idéntica.

Seleccionar todos al hacer una búsqueda

Relacionado con el anterior, podemos utilizar el buscador para encontrar una palabra, y haciendo Alt + ENTER, se seleccionan todas las ocurrencias de dicha palabra en el archivo.

Extensible y configurable

Una de las ventajas de que sea Open Source es que puedes manipular el código a tu antojo si lo necesitas. No deberías tener que llegar a ese extremo, ya que tiene varios archivos de configuración para personalizar cantidad de cosas y hay una gran cantidad de extensiones para personalizar tu entorno.

Terminal integrado

En la nueva release de VSCode puedes abrir/cerrar tu terminal por defecto, pero integrado dentro del entorno de VSCode con una combinación de teclas. De entrada es Ctrl + `, pero he visto que según el teclado esto puede ser conflictivo, así que yo lo he cambiado a otra combinación. Recuerda que es configurable 😉

Extensiones de VSCode para hacerte la vida más fácil

RelativePath

RelativePath es una extensión que indexa los archivos del proyecto para autocompletar las rutas locales que escribimos (en los imports de código, por ejemplo).

Instalación

Todas las extensiones de VSCode se instalan accediendo a la linea de comandos del entorno. Esto lo haces o bien seleccionando el icono en forma de cuadrado de abajo a la derecha, o con Ctrl + Shift + P.

Una vez estamos en la caja de comandos, escribimos:

ext install RelativePath

Y seleccionamos el botón de descarga.

Después de instalar la extensión, VSCode nos pedirá de forma automática reiniciar la app para cargar el nuevo plugin. Un click y listo.

Como usarlo

Allí donde queramos incluir un path relativo, clickamos la combinación de teclas:

Ctrl + Shift + H

y se abrirá un desplegable con los archivos del proyecto y una caja de búsqueda en la que podemos empezar a escribir para filtrar.

Seleccionamos el archivo que queremos incluir y nos aparece su path relativo en el editor, ahí donde habíamos colocado el cursor.

TSLint

TSLint es un linter para TypeScript, es decir, una herramienta que revisa nuestro código mientras lo editamos, para asegurar que usamos buenas prácticas.

Instalación

De nuevo desde linea de commandos de VSCode (Ctrl + Shift + P), escribimos:

ext install tslint

Probablemente después de reiniciar la app, te aparece el error «failed to load tslint». Eso es que necesitas instalar a nivel tslint a nivel local, y también -si no los tienes ya-, tslint y su dependencia typescript a nivel global.

Vamos al terminal, y escribimos:

$  npm install -g tslint typescript
$  npm install tslint

En la barra inferior de VSCode, a la izquierda, aparecen los símbolos de error (una X), y de aviso (una exclamación). Al hacer click te muestran los errores o mejoras que nos propone el propio VSCode, o tslint.

Angular2 TypeScript snippets

Si hay una extensión que necesitas tener para desarrollar en Angular 2 con VSCode, es el plugin de snippets TypeScript John Pappa. Proporciona fragmentos predefinidos de código para las tareas más básicas a desarrollar en Angular 2 como componentes, servicios, etc.

Instalación

Hacemos Ctrl + Shift + P para abrir la consola de VSCode y añadimos:

ext install angular2

Después de reiniciar VSCode, ya tenemos nuestros snippets disponibles.

Como usarlo

Los snippets empiezan por ng2. Solo tienes que empezar a escribir y seleccionar el snippet deseado haciendo ENTER: ¡Tu archivo se llena de código como por arte de magia!

Te pongo los principales snippets:

TypeScript Snippets

• ng2-component-root
• ng2-bootstrap
• ng2-component
• ng2-pipe
• ng2-route-config
• ng2-route-path
• ng2-service
• ng2-subscribe

HTML Snippets

• ng2-ngClass
• ng2-ngFor
• ng2-ngIf
• ng2-ngModel
• ng2-routerLink
• ng2-ngStyle
• ng2-ngSwitch

Bonus track – debuga desde Chrome

VSCode tiene una extensión para debugar desde el propio IDE lo que estás ejecutando en Chrome.

Instalación

Tienes que instalar Debugger for Chrome haciendo Ctrl + Shift + P y escribiendo:

ext install chrome

Como se usa

Una vez instalado y reiniciado VSCode, hacemos click en el icono de debugger de la barra lateral izquierda y seleccionando la rueda tipo settings elegimos la opción Chrome. Nos abre el archivo de configuración.

Es importante que tengamos la configuración como se muestra en la imagen teniendo en cuenta que nos centraremos en la opción Launch localhost with sourcemaps. La url tiene que coincidir con la URL en la que estés ejecutando tu servidor en local.

También será imprescindible que utilices SourceMaps. Esto es una herramienta de HTML5 que mapea el código minificado (en este caso TypeScript compilado y transpilado a plain javascript) con el código original (TypeScript). Muchos boilerplates que se utilizan como punto de partida de la app (como el Angular 2 Quick Start) ya lo incorporan.

Es importante que antes de ejecutar el debugger cierres completamente Chrome

Lo único que tienes que hacer entonces es:

1. Cierra todos los procesos de Chrome (hangouts incluido)
2. npm start (o lo que utilices para lanzar tu servidor en local)
3. Ves a la vista de debug de VSCode
4. Añade los breakpoints que quieras
5. Asegurarte de que la url del archivo de configuración coincide con la de tu servidor
6. Selecciona la opción Launch localhost with sourcemaps del desplegable
7. Haz click en el botón verde de ejecución

Eso debería lanzar una ventana de Chrome en la url base del servidor que estás ejecutando en local, con tu app cargada, y vinculada a tu debugger.

Conclusiones

Elegir un editor de código es cuestión de gustos. En los últimos tiempos me he sentido muy a gusto con sublime y brackets para trabajar con webapps, por ejemplo. Y luego está WebStorm, que está un nivel por encima de la mayoría de IDEs.

En todo caso, si vas a trabajar con Angular2, te recomiendo darle una oportunidad a VSCode. Es ligero, potente, y muy completo para trabajar con TypeScript.

¡Saludos!