¿Qué IDE utilizar con Angular?

Normalmente, a la hora de empezar nuestro proyecto de desarrollo se suele tener en cuenta principalmente el lenguaje de programación o qué tipo de framework vamos a usar, pero otra necesidad importante es saber qué entorno de desarrollo vamos a utilizar (aunque algunos desarrolladores no utilicen). Un entorno de desarrollo adecuado nos permitirá hacer el trabajo más cómodo y de manera más precisa.

En este artículo vamos a hablar de los IDE más recomendables para Angular y de las extensiones más útiles que podemos utilizar a la hora de desarrollar una aplicación.

 

¿Qué es un entorno de desarrollo?

Un IDE, o entorno de desarrollo integrado, es una aplicación que proporciona a los desarrolladores herramientas con las que poder desarrollar aplicaciones con mayor facilidad.

A diferencia de los editores de texto, que son herramientas más simples y compactas, los IDE aumentan nuestra productividad al añadir utilidades como autocompletado del código, refactorización, control de versión y depuración visual de errores, entre otras muchas más.

¿Qué IDE utilizar con Angular?

Sublime Text

Sublime Text es un sofisticado editor de texto para código, marcado y prosa. Es bastante simple, pero a la hora de usarlo su rendimiento es sorprendente, sobre todo para equipos más limitados.

Es necesario instalar el plugin de Typescript mediante el instalador de paquetes, por lo que no es tan simple para desarrolladores noveles. Pero en caso de necesitar un IDE ligero sí es el adecuado.

Este es, probablemente, uno de los editores de código más extendidos hoy en día, aunque últimamente ha perdido algo de impulso con los usuarios que prefieren otros IDE, como el propio Atom de GitHub.

Atom

Desarrollado por GitHub, es un IDE altamente personalizable. La facilidad de instalación de nuevos paquetes ha convertido a Atom en el IDE elegido por muchos desarrolladores.

Las funcionalidades incluidas son más o menos similares a los otros IDES: sugerencias automáticas de código, introspección de código o compilación automática al guardar, por nombrar algunas. Al igual que Sublime Text, es necesario instalar un plugin de Typescript.

WebStorm

Webstorm es un potente editor de código creado por IntelliJ y desarrollado por Jetbrains. Es una excelente elección para desarrollar aplicaciones Angular basadas en TypeScript.

Con Webstorm puedes comenzar a desarrollar componentes Angular desde el primer día, ya que lleva TypeScript incorporado. También elimina su dependencia de los complementos de terceros al poder compilar fácilmente el código creado en TypeScript.

El único inconveniente que tiene es que es de pago, pero merece la pena por utilizar un entorno tan robusto como este.

Visual Studio Code

Visual Studio Code es un editor de código fuente desarrollado por Microsoft para Windows, Linux y OS X. Es gratuito y de código abierto, e incluye soporte para depuración, control Git integrado, resaltado de sintaxis, autocompletado con Intellisense y refactorización de código.

Visual Studio Code cuenta con una comunidad asombrosa detrás y es mantenido por uno de los mejores equipos de desarrollo en Microsoft.

A la hora de trabajar, Visual Studio Code es una buena opción por lo ligero y simple que es y las utilidades que aporta, además la cantidad de extensiones que permite personalizar totalmente el entorno y mejoran la experiencia a la hora de desarrollar cualquier aplicación Angular.

Extensiones esenciales para Visual Studio Code con Angular

Prettier

Esta extensión es esencial, pues nos permite dar automáticamente formato al código cada vez que guardamos para mantener nuestro código organizado y limpio, el sueño de cualquier desarrollador.

Auto Import

Esta es otra extensión que nos facilita mucho a la hora de desarrollar, ya que como dice el propio nombre nos auto importa automáticamente componentes y módulos.

 vscode_icons

Esta extensión reemplaza los iconos que muestra Visual Code en función de cada tipo de archivo, algo que da un mejor aspecto al editor.

Npm

Este plugin nos permite ejecutar acciones del gestor de paquetes Npm en Visual Code Studio. Nos permite ejecutar comandos como los siguientes directamente desde el editor.

Debugger para Chrome, Firefox

Son dos extensiones distintas pero que se utilizan exactamente igual en función del navegador, si utilizamos Chrome o Firefox. Nos permite depurar directamente en Visual Code ya que nos presenta la información del navegador directamente en el IDE.
Adicionalmente, permite puntos de ruptura en nuestros componentes e ir depurando paso a paso.

TSLint

La extensión TSLint subrayará las líneas del código donde exista algún error y te mostrará una lista de advertencias y errores al pasar el ratón sobre él.

Git history

Una de las extensiones esenciales para aquellos que trabajamos con Git en nuestros proyectos. Permite mostrar en la interfaz de Visual Code todo el historial de cambios realizados en el proyecto y ver las distintas ramas de este. También permite realizar todas las acciones de Git tales como combinar, revertir o fusionar, así como otras funcionalidades de Git.

 

Conclusiones

En definitiva, Visual Code Studio es un entorno de desarrollo que nos permite personalizar la experiencia de desarrollo y mejora nuestro flujo de trabajo al desarrollar nuestro proyecto en Angular.

Todo gracias a las numerosas extensiones que nos proporciona el Marketplace de Microsoft, estas extensiones son las que utilizamos a la hora de desarrollar, puesto que nos da las herramientas que necesitamos para trabajar cómodamente.

Todas las extensiones las podéis encontrar aquí.