Preparando el entorno (y II)

La elección de un editor de código o de un IDE para trabajar con una determinada tecnología no es banal. Para determinadas tecnologías existen IDE’s específicamente desarrollados, que facilitan mucho el trabajo. Para otras tecnologías existen IDE’s más genéricos, que, con determinados plugins, nos prestan el servicio que necesitamos.

En este artículo vamos a hablar del Visual Studio Code. Se trata de un IDE de Microsoft que, además de ser gratuito, permite implementar gran cantidad de plugins que nos van a venir muy bien, y que iremos instalando según los necesitemos, aunque, en este artículo, instalaremos los más comunes.

ATENCIÓN. Emplear un editor u otro es una elección que, en la mayoría de los casos, viene dada por las preferencias personales de cada uno. Yo empleo Visual Studio Code en muchos de mis desarrollos. Para tareas más secundarias, o bien para desarrollos más específicos empleo otros editores. En estos artículos voy a desarrollar con Visual Studio Code, ya que permite instalar plugins muy interesantes a la hora de trabajar con Angular, que yo encuentro sumamente útiles. Si tú deseas emplear otro editor, que sepas que todos los ejemplos de estos tutoriales te vaan a funcionar exactamente igual, por lo que puedes usar la herramienta con la que te sientas cómodo. La lista de posibilidades es interminable (WebStorm, NetBeans, Sublime Text…). Algunos son de pago, y otros gratuítos. Si no deseas instalr o usar Visual Studio Code, puedes pasar al siguiente artículo.

Si has llegado hasta aquí, vamos a descargar Visual Studio Code desde su página oficial (https://code.visualstudio.com) y a instalarlo en nuestro ordenador.

INSTALANDO EXTENSIONES

Las extensiones o plugins amplian las funcionalidades de nuestro VSC (llamaremos así a Visual Studio Code en adelante, para abreviar), para facilitarnos nuestro trabajo diario. Si abrimos el VSC, veremos que tiene, por defecto, un aspecto similar al siguiente:

Observa la barra lateral, con una serie de cinco botones, a la izquierda del área de trabajo. El botón que nos interesa ahora es el que aparece rodeado, en la imagen, con un círculo de color rojo. Si lo pulsas, te aparecerá una lista de las extensiones que tienes instaladas. En la parte superior de la lista aparece un campo de texto donde puedes teclear el nombre de una extensión, y VSC la buscará en la página oficial, para que puedas instalarla.

Aunque la extensión se busca en Internet, VSC te la muestra en el área de trabajo, con un botón específico para instalarla, así como algunas instrucciónes para usarla, que te recomendo leer, aunque sea por encima. Siempre podemos volver al instalador, y pedir una extensión ya instaalada, para ver esas instrucciones.

Las extensiones que vamos a instalar, de momento, son:

  • Color Picker. Se trata de una extensión que permite abrir un selector de color y, una vez elegido el que deseemos, nos incluye, en el código que estamos editando, el valor de ese color.
  • Angular Essentials. Es una extensión con varias funcionalidades integradas para desarrollo en Angular, que nos permitirá detectar con mayor facilidad errores de sintaxis, autocompletar código, detectar ciertos errores en TypeScript, etc.
  • TS Lint. Nos permite detectar errores de sintaxis o de prácticas de programación en TypeScript. Aunque la extensión anterior ya incorpora un TS Linter, no está de más instalar, específicamente, esta extensión. Type Script juega un papel fundamental en el desarrolo con Angular. Si aún no lo has hecho, te recomiendo que leas estos artículos. No obstante, en esta serie sobre Angular, aprenderemos más cosas sobre TypeScript.

Más adelante, instalaremos otras extensiones, según  nos hagan falta.

CONCLUYENDO

Ya tenemos instalado VSC, con las extensiones básicas que vamos a usar. Te iré comentando funcionalidades del programa, según vayan surgiendo, para no abrumarte ahora con cosas que no emplearemos hasta que llegue el momento. Así que, llegados a este punto, vamos a empezar a conocer Angular 5 en el siguiente artículo.

   

Deja un comentario